How to Use Array Map Function in React.js

Published on August 31, 2020 20 sec read

HIRE US 🖐
We're available to do freelance project. Take a look at our services!

Map is a collection of elements where each element is stored as a key, value pair. Map object can hold both objects and primitive values as either key or value. It’s like PHP’s foreach loop.

Let’s try to render an array using map function in React app:

App.js
import React from 'react';

function App() {
  const array = ['1', '2', '3', '4', '5'];

  return(
    <ul>
      {array.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

export default App;
That’s it. Thanks for reading. 🙂

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *