Reactjs | Make a List in Reactjs from Array

Today we will learn how to make list in Reactjs form the array of data. 

Here is the code link for reference.

We have made 2 components:

1) index.js 
This is the root component to launch our application

2) List.js
This is the smart component and it is doing all the work.





In the below code snippet we are assigning data to the state or you can just skip this step and make a const and assign all data to that const.

this.state = {

color: ["red", "green", "yellow"]

};

In the below code, we are assigning the data of color to the const COLORDATA 

1) We are using ES6's map feature to map over the Array and returning the li with the value in {elm} to the makeList.

2) Now in return we are just printing the {makeList} to <ul>.

render() {

const COLORDATA = this.state.color;

const makeList = COLORDATA.map((index, elm) => {

return <li>{elm}</li>;

});

return <ul>{makeList}</ul>;

}

}

At the last, we will call the List component in index.js to render it on the browser.


Happy Learning!!

You can follow me on Twiiter