How To Render An Array Of Objects In ReactJS?

Last Updated : 12 Apr, 2025

Rendering dynamic data in ReactJS is one of the most fundamental tasks when building interactive web applications. One of the most common scenarios is rendering an array of objects, such as a list of users, products, or posts, in the user interface (UI).

To render an array of objects in React we will iterate the objects using an array map and use the following approaches to render data on the web page.

Approach 1: Using Unordered List with Array.map

The most common and recommended way to render an array of objects in React is by using the Array.map method to iterate through the array. This approach involves creating an unordered list (<ul>) and rendering each object as a list item (<li>).

CSS

/* App.css */

.App {
    text-align: center;
    overflow-y: scroll;
}
.geeks {
    color: green;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    min-width: 33rem;
    text-align: left;
}

JavaScript

// 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;

Output

Render an Array of Objects in ReactJS

In this code

This React app renders a table with student data (Name, Marks, Phone) using React-Bootstrap.
The data is stored in an array of objects and displayed dynamically using the map() method.
The RenderingArrayOfObjects component creates the table rows, and the App component displays the table with headers.
Bootstrap is used for styling the table with a clean, responsive layout.

Approach 2: Using React-Bootstrap Table

We may want to render the array of objects in a more structured way, such as a table. This approach uses React-Bootstrap Table a popular React library that provides Bootstrap components for building responsive and styled UIs.

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

npm install react-bootstrap [email protected]

JavaScript

// 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;

CSS

/* App.css */

.App {
    text-align: center;
    overflow-y: scroll;
}
.geeks {
    color: green;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    min-width: 33rem;
    text-align: left;
}

Output

Render an Array of Objects in ReactJS

In this code

This React app displays a table of student data (Name, Marks, Phone) using React-Bootstrap.
The data is stored in an array of objects and rendered dynamically using the map() method.
The RenderingArrayOfObjects component generates table rows, and the App component renders the table with headers for each column.
Bootstrap styling is applied for a clean and responsive layout.

Best Practices for Rendering Arrays in React

Unique Keys: Always provide a unique key prop for each item when rendering lists. React uses keys to optimize re-renders, and this helps avoid potential bugs when items are dynamically added or removed.
Avoid Using Index as Key: While using an index as a key is common, it’s not the best practice, especially for dynamic lists where items may be reordered or deleted. It’s better to use a unique identifier like id.
Conditional Rendering: Handle loading, error, and empty states to improve the user experience. You can display a loading indicator or a message when there is no data.
Use Proper Data Formatting: Ensure that the data you’re rendering is formatted correctly before passing it to the component. For example, if you’re dealing with dates or numbers, you may want to format them for better readability.

Conclusion

Rendering arrays of objects in React is an essential skill for building dynamic and interactive user interfaces. Whether you are displaying a list of items, users, products, or posts, React provides multiple approaches for efficiently rendering data.

What is the Purpose of __filename Variable in Node.js ?

nikitamehrotra99

Improve

Article Tags :

How To Render An Array Of Objects In ReactJS?

Approach 1: Using Unordered List with Array.map

Approach 2: Using React-Bootstrap Table

Best Practices for Rendering Arrays in React

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?