How to use map() to iterate over array in ReactJS

map() is used in reactjs to iterate over an array and display the content on frontend. It is a standard JavaScript function that could be called on any array. In current example we are working on Functional component.

First we need to have an array that we need to render. Like this:

Now we are going to loop through data array, that gives access of each item in the array and can return a JSX element.

Here we created a component called MapExample, and passed props to it. props will contain data that would be used in this component, which will talk later.

Here we are using map() on data array.
The key prop is used to uniquely identify each item. It is used to give each element a unique identifier. We should always include 'key' prop for each item in the list.

And Bingo! We are done. Now you can display data from any array using map() in react functional component.

Hope that helps!