When You Dont Know How to React Meme

How To Create React.js Components Dynamically

One of them most common tasks that we demand to know how to do with React.js is to render a list of items dynamically - meaning: we don't know how many items nosotros're going to render at any given time. Zero or one hundred - it shouldn't affair.

Let's larn how to do it with a assistance of an intuitive example.

In this tutorial, nosotros're going to build this application:

Figure 1. Our application.

You lot can find the total source lawmaking in this GitHub repository.

Our application is going to return 5 images dynamically. There is a take hold of: our application will work equally well for 50 or whatsoever other number of images. Let's see how.

Our application will exist made of 2 React.js components:

1. Application
2. Paradigm

Application component is a contrainer component - it encapsulates our entire React.js awarding. Epitome component on the hand - renders a unmarried image.

Allow's create the Image component beginning:

                          import React from 'react';  let Image = part statelessFunctionComponentClass(props) {   allow source = './images/' + props.source;    let way = {     width: '200px',     margin: '10px 5px 0px 5px'   };    return (     <img src={source} style={way} />   ); };  export default Epitome;                      

Code snippet 1. Image.jsx

If you're not sure why we're non calling React.createClass role to create a new React component class, and then please check this tutorial in which I explain what statelessFunctionComponentClass role does.

Equally you can run into our statelessFunctionComponentClass function returns:

                          <img src={source} fashion={style} />                      

Code snippet 2. Image.jsx

img DOM element will be rendered when you create an case of Paradigm React component.

We get an paradigm source from the parent React component as a property:

                          allow source = './images/' + props.source;                      

Code snippet 3. Image.jsx

Then nosotros also create some inline styles for our img Node chemical element:

                          let style = {   width: '200px',   margin: '10px 5px 0px 5px' };                      

Code snippet four. Image.jsx

Notice that creating inline styles here is optional. We apply it purely for better look and experience.

At present that we have a fashion to render more than one image - how can we render more than ane?

That's the job for Application component. Permit'southward create it:

                          import React from 'react'; import Image from './Image.jsx'; import data from '../../data.json';  permit Application = React.createClass({   createImage: function (paradigm) {     return <Paradigm source={image} key={image} />;   },    createImages: function (images) {     return images.map(this.createImage);   },    render: function () {     return (       <div className="container">         <div className="row">           <div className="col-sm-12 text-center">              {this.createImages(information.images)}            </div>         </div>       </div>     );   } });  export default Awarding;                      

Lawmaking snippet 5. Application.jsx

Our Application component renders some layout elements with Bootstrap class names and so calls this.createImages function that actually creates the nessesary number of Image component instances:

                          render: function () {   return (     <div className="container">       <div className="row">         <div className="col-sm-12 text-middle">            {this.createImages(data.images)}          </div>       </div>     </div>   ); }                      

Code snippet 6. Application.jsx

{this.createImages(data.images)} office call does most of the work. We're passing data.images as an argument. What is data.images? The data object comes from importing a JSON file and converting it to a JavaScript object that we reference as data:

                          import data from '../../data.json';                      

Lawmaking snippet seven. Awarding.jsx

If we'll look into data.json file - nosotros'll find this:

                          {   "images": [     "IMG_5774.jpg",      "IMG_6305.jpg",      "IMG_6701.jpg",      "IMG_6732.jpg",      "IMG_6795.jpg"   ] }                      

Code snippet 8. data.json

This JSON object has images holding that points to an array of epitome file names.

So when we're importing information.json file content as a data variable and passing data.images every bit an argument to this.createImages role telephone call - we're actually passing an array of epitome file names to this.createImages function telephone call:

                          [   "IMG_5774.jpg",    "IMG_6305.jpg",    "IMG_6701.jpg",    "IMG_6732.jpg",    "IMG_6795.jpg" ]                      

Code snippet 9. information.json

And what createImages function does with that array? Let's take a look:

                          createImages: office (images) {   return images.map(this.createImage); },                      

Code snippet ten. Application.jsx

createImages role iterates over images array and for each item in that array information technology calls createImage function passing that particular equally a statement.

Finer images.map(this.createImage) is going to iterate over v epitome file names and call createImage 5 times.

We know that map function returns a new array that is made of items that createImage office returns. Our createImages office then returns that new assortment and since we're calling createImages in our component's return role - that new array will be rendered past React.

We want that array to be an array of React component instances - an instance per image.

Let'due south take a expect at createImage function:

                          createImage: function (paradigm) {   return <Image source={image} key={image} />; },                      

Code snippet 11. Application.jsx

It takes an image file name every bit a parameter. Then information technology creates a new instance of our Image component passing prototype as value for source and key properties.

Remember that our Image component needs to know what image file it should render and source belongings tells it exactly that. But what about that key property - we don't utilise it in our Prototype component - why are we passing it then?

The primal property is used by React to uniquely idenfity our Image component instances.

Think most it this way: React needs a way to distinguish betwixt multiple instances of a kid component (our Image component is a child component of Awarding component) when they're created dynamically. These are besides called "Dynamic Children" in React.

Naturally, the value for key property must be unique. It's upwards to u.s. where this value is coming from. In this example, all file names are unique, so we're using them as unique keys for dynamic children.

Allow's review

Here is what'southward happening: in our Awarding component React calls return role that calls createImages function in one case that calls createImage as many times as we have image file names in our data.images array.

If we subsequently decide to update information.json file and add some other ten prototype file names - our React awarding will work without any changes. Information technology will import updated data.json, get array of prototype file names and pass information technology to createImages office call.

And that'south how you create React.js components dynamically.

Cheers for your attention!

Delight take a expect at the complete source code on GitHub and the live version of our app.

I promise you lot've enjoyed this tutorial and I would love to hear your feedback in the comments. You tin can get in touch with me via Twitter and e-mail.

Artemij Fedosejev

P.Southward. I've too written React.js Essentials volume and I teach people React.js and JavaScript!

rexfordbefor1955.blogspot.com

Source: https://react.tips/how-to-create-reactjs-components-dynamically/

Share this post