How to render an array of objects in ReactJS ?

React.js is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
In this article, we will learn about How to render an array of objects in React.

Initially, we will begin with learning what is an array of objects.
 Array of objects: It stores multiple values in a single variable. The object can contain anything in the real world, such as person names, cars, game characters. Objects are very easy to use in some situations, if you know where the data is being processed. The character set of objects are known as Properties. Properties of an object can be called by using DOT(“.”) notation and (“[]”) notation.
Syntax:

var object=[
   {
        "property1":"value1",
         "property2":"value2"
    }
]

Now,  let’s create a React application to learn How to render an array of objects.
Creating React Application:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: Once it is done, change your directory to the newly created application using the following command.

cd foldername

Project Structure: The project should look like this:

How we will render an Array of Objects?
We will use the map function to access each object from the array.
The map() method in JavaScript creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. Generally, map() method is used to iterate over an array and calling function on every element of the array.
Syntax:

array.map(function(currentValue, index, arr), thisValue)

Parameters: This method accepts two parameters, as mentioned above and described below:

• function(currentValue, index, arr): It is required parameter, and it runs on each element of array. It contains three parameters, which are listed below:
  • currentValue: It is a required parameter, and it holds the value of current element.
  • index: It is an optional parameter, and it holds the index of the current element.
  • arr: It is an optional parameter, and it holds the array.
• thisValue: It is an optional parameter and used to hold the value of passed to the function.

Return Value: It returns a new array and elements of arrays are the result of callback function.

Example 1: In this example, we will simply create an array of objects that contains states and their capitals. We will render them in an unordered list. States are in red and bold.

Javascript

import React from 'react'
function RenderingArrayOfObjects() {
    const data = [
        {
            "State": "Uttar Pradesh",
            "Capital": "Lucknow"
        },
        {
            "State": "Gujarat",
            "Capital": "Gandhinagar"
        },
        {
            "State": "Karnataka",
            "Capital": "Bengaluru"
        },
        {
            "State": "Punjab",
            "Capital": "Chandigarh"
        },
        {
            "State": "Maharashtra",
            "Capital": "Mumbai"
        }
    ]
    const listItems = data.map(
        (element) => {
            return (
                <ul type="disc">
                    <li style={{
                        fontWeight: 'bold',
                        color: 'red' }}
                    >
                        {element.State}
                    </li>
                    <li>{element.Capital}</li>
                </ul>
            )
        }
    )
    return (
        <div>
            {listItems}
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h3>Rendering Array of Objects</h3>
                <br></br>
                <RenderingArrayOfObjects />
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In this example, we will map an Array of Object containing student Marks into a Table.

Note: To run below example, you need to install react-bootstrap and bootstrap.

npm install react-bootstrap bootstrap@5.1.3 bootstrap

Javascript

import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';

function RenderingArrayOfObjects(){
  const data=[
      {
          "Name":"Nikita",
          "Marks":"98",
          "Phone":"123"
      },
      {
         "Name":"Pratiksha",
          "Marks":"96",
          "Phone":"127"
      },
      {
          "Name":"Muskan",
          "Marks":"97",
          "Phone":"163"
      },
      {
         "Name":"Nishi",
         "Marks":"95",
         "Phone":"193"
      },
      {
         "Name":"Himanshu",
        "Marks":"78",
        "Phone":"120"
      }
  ]
  const tableRows=data.map(
      (element)=>{
          return(

            <tr>
              <td>{element.Name}</td>
              <td>{element.Marks}</td>
              <td>{element.Phone}</td>
            </tr>

          )
      }
  )
  return(
      <div>

        <Table hover>
            <thead>
              <tr>
                <th> Name</th>
                <th>Marks</th>
                <th>Phone</th>
              </tr>
            </thead>
            <tbody>
              {tableRows}
            </tbody>
          </Table>

      </div>
  )
}
function App() {
  return (
    <div className="App">
      <div>
        <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
        <h3>Rendering Array of Objects</h3>

        <br></br>
        <RenderingArrayOfObjects />

      </div>
    </div>
  );
}

export default App;

Output: