Lists & Keys

In React, you use JavaScript's `map()` to turn array data into a UI list. Repeated UI like blog posts, products, menu items, notifications, and lessons can all be built with list rendering.

function TodoList() {
  const todos = [
    { id: 1, text: 'Learn React' },
    { id: 2, text: 'Build a project' },
    { id: 3, text: 'Deploy the project' }
  ];

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

`todos.map()` turns each item in the array into an `

` element. `key={todo.id}` lets React tell each item apart from the others.

A bullet list with three lines will appear — Learn React, Build a project, Deploy the project.