How do you render a list in React?

Direct answer

Use JavaScript array operations such as map() to create JSX for each item and give each rendered sibling a stable key.

UserList.jsx

const users = [
  { id: "u1", name: "Mina" },
  { id: "u2", name: "Ravi" },
];

export default function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

React does not introduce a special loop syntax for JSX. You usually transform arrays with normal JavaScript methods such as map() and filter().