React - Display a list of items

Other versions available:

This is a quick example to show how to display a list of items in React.

The example simply renders an array of user objects as rows in a table using the array map function inside the JSX returned by the React component.

Here it is in action: (See on StackBlitz at

Example React component that renders the users array

The react app component declares the users state variable with the useState hook function and sets the initial state to a hardcoded array of users.

In the return JSX the component loops over the users with the array map function ( => ...)) and renders a table row for each user that includes the user name, email and role.

import React, { useState } from 'react';

function App() {
    const [users, setUsers] = useState([
        { id: 1, firstName: 'Frank', lastName: 'Murphy', email: '[email protected]', role: 'User' },
        { id: 2, firstName: 'Vic', lastName: 'Reynolds', email: '[email protected]', role: 'Admin' },
        { id: 3, firstName: 'Gina', lastName: 'Jabowski', email: '[email protected]', role: 'Admin' },
        { id: 4, firstName: 'Jessi', lastName: 'Glaser', email: '[email protected]', role: 'User' },
        { id: 5, firstName: 'Jay', lastName: 'Bilzerian', email: '[email protected]', role: 'User' }

    return (
        <div className="container">
            <h3 className="p-3 text-center">React - Display a list of items</h3>
            <table className="table table-striped table-bordered">
                    {users && =>
                        <tr key={}>
                            <td>{user.firstName} {user.lastName}</td>

export { App };

Render an array of objects with index instead of id

If you have an array of objects that don't have a unique property (e.g. id) that you can use for the key prop, it's possible to use the item index which is provided by the array map function.

This is how the above map function would look using the item index instead of the id as the key prop:

{users &&, index) =>
    <tr key={index}>


Need Some React Help?

Search fiverr to find help quickly from experienced React developers.

Exclusive Semrush Special Offer

FREE 14-day PRO trial to Semrush is available to visitors of this blog. Check your website health quickly and easily with the Semrush all-in-one site auditing tool, eliminate technical SEO issues and optimize your website's speed and performance.

Supported by