How to render a list of items in React

#react

Last updated on Oct 2, 2020 by Suraj Sharma



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 functional 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 Articles




Suraj Sharma is a JavaScript Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.