How to Use Array Map Function in React.js

Published on August 31, 2020 20 sec read

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. 🙂

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

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

Follow