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

Join our improved Full Stack Development Program: learn Node.js and React to make cool websites.

Prepare for a better salary with our Full Stack Development Course.

github
website

How to Become a Front-End Developer?
Array methods in react.js
Fragment in react.js
Conditional rendering in react.js
Children component in react.js
use of Async/Await in react.js
Array methods in react.js
JSX in react.js
Event Handling in react.js
Arrow function in react.js
Virtual DOM in react.js
React map() in react.js
How to create dark mode in react.js
How to use of Props in react.js
Class component and Functional component
How to use of Router in react.js
All React hooks explain
CSS box model
How to make portfolio nav-bar in react.js