How to render an array of objects in ReactJS ?

To show a bunch of things in ReactJS, we go through each item and show its details on the website. This helps make the webpage more lively and lets us change what's shown based on what's happening.

Array of objects: It's like having a list of things, where each thing has its own set of details. We can show this list on the website like this.

Table of Content

Using Unordered List with Array.map
Using Bootstrap Table

Steps to create the 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

Application Structure:

Approach 1: Using Unordered List with `Array.map`

This method uses a way called "Array.map" to go through a list of items and make a list on the webpage with our own special look.

Example 1: Let's say we have a list of states and their capitals. We'll make a list with the states shown in red and bold letters.


// App.js

import React from "react";
import "./App.css";

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" className="item">
                <li
                    style={{
                        fontWeight: "bold",
                        color: "blue",
                    }}
                >
                    {element.State}
                </li>
                <li>{element.Capital}</li>
            </ul>
        );
    });
    return <div className="container">{listItems}</div>;
}
function App() {
    return (
        <div className="App">
            <div>
                <h1 className="geeks">GeeksforGeeks</h1>
                <h3>Rendering Array of Objects</h3>
                <br></br>
                <RenderingArrayOfObjects />
            </div>
        </div>
    );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

Approach 2: Using React-Bootstrap Table

This method uses React-Bootstrap components and the Bootstrap style library to make tables for the list of items.

Note: Before trying the example below, make sure to install react-bootstrap and bootstrap.

npm install react-bootstrap bootstrap@5.1.3

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

// App.js

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

// Render a table
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",
        },
    ];
    // Render rows/items
    const tableRows = data.map((element) => {
        return (
            <tr className="items">
                <td>{element.Name}</td>
                <td>{element.Marks}</td>
                <td>{element.Phone}</td>
            </tr>
        );
    });
    return (
        <div className="container">
            <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 className="geeks">GeeksforGeeks</h1>
                <h3>Rendering Array of Objects</h3>

                <br></br>
                <RenderingArrayOfObjects />
            </div>
        </div>
    );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

"This course had really great and organized stuff! Doing projects in the course helped me understand things quicker. The instructor in the live classes knows their stuff." - Tejas | Deutsche Bank