How to render a list of items in React

In this tutorial, you will learn to render or display a list of items in React.

Consider, we have a list of users as a local state(initialized using useState() hook) inside the function component ItemList

const userList = [
 {
   id: 1,
   username: 'surajy2j',
   name: 'Suraj'
 },
 {
   id: 2,
   username: 'max20',
   name: 'Maxwell'
 }
];

You can render the list of users as li elements using the Array.map() method.

const ItemList = () => {
 const [users, setUsers] = React.useState(userList);
  return (
    <ul>
      {users.map(user=>(
        <li key={user.id}>
          {user.username}
        </li>
      ))}
    </ul>
  );
}

export default ItemsList;

Related Solutions

• How to create a csv file from response data in React

• How to conditionally add props to React component

• How to import CSS from the public folder in React

• How to disable a Button when an Input field is Empty in React