How to map array of objects in ReactJS?

About React JS and how to install it

React is a JavaScript library used to create user interfaces (UI) for web applications. Facebook created it and released it in 2013. Developers can use React to create UI components that can be easily reused, composed, and managed. React takes a declarative approach to UI development, which means that developers can simply define how the UI should look in different states and React will update the UI when these states change.

React is built on a component-based architecture, which divides each UI element into smaller, reusable components. These components can be combined to create complex UI elements, making large and complex UIs easier to manage.

Follow the following steps on installing React JS

1. Install Node.js from https://nodejs.org/ on your computer.
2. Open terminal and type “npx create-react-app app-name >> cd app-name”. After installing we can begin building React app. For example, creating a new file index.js in project directory.

Array of Objects in JavaScript

An array of objects in JavaScript is a collection of homogeneous data that stores a sequence of numbered objects at a single location. In JavaScript, an array is the collection of several types of data at a single location in order.

Mapping array of objects in React

In React, you can create a component that renders a container element and then uses the map() method to iterate over the array and render each item inside the container.

import React from 'react';

function ItemList(props) {
  const items = props.items;
  const itemElements = items.map((item) => 
    <div key={item.id}>{item.name}</div>
  );
  return (
    <div className="item-container">
      {itemElements}
    </div>
  );
}

export default ItemList;

In the preceding code, we define an ItemList component that accepts an array of items as a prop. The map() method is then used to create a new array called itemElements, where each element is a element containing the item’s name.

Note:

It’s worth noting that we also add a key prop to each <div> element. This is a unique identifier for each item in the array that React requires to help it determine which items have changed when the component re-renders.

Conclusion

Finally, the itemElements array is rendered within a <div> element with the className item-container. This will create a container for all of the elements generated by the array.

import React from 'react';
import ItemList from './ItemList';

function App() {
  const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
  ];
  return (
    <div>
      <h1>Items</h1>
      <ItemList items={items} />
    </div>
  );
}

export default App;

We create an array of items in the App component and pass it as a prop to the ItemList component. After that, the ItemList component renders each item within a container with the className item-container. The output will be a list of <div>elements, each with the name of an item.