How to Use Array Map Function in React.js

avatar
Published: Aug 31, 2020 - Updated: Mar 16, 2022

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

Comments

No comments yet…