DEV Community

Priyank Deep Singh
Priyank Deep Singh

Posted on • Edited on

2

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 front end. It is a standard JavaScript function that can be called on any array. In the current example, we are working on the Functional component.

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

Image description

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

Image description

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

Here we are using map() on data the 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 a '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!

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay