Part 3.4Rendering lists and conditional content

Rendering a list

Use an array method such as map to transform data into components. Keep the original data as data; do not store JSX in it.

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <TaskItem
          key={task.id}
          title={task.title}
          complete={task.complete}
        />
      ))}
    </ul>
  );
}

Choosing keys

A key identifies an item between renders so React can match it with the correct component. Use a stable identifier from the data. Avoid an array index when items can be inserted, removed or reordered; the same index may then refer to a different item.

Conditional rendering

Use ordinary JavaScript: return early for a completely different state, use a ternary when choosing between two expressions, and use && when content is either present or absent.

{tasks.length === 0
  ? <p>No tasks yet.</p>
  : <TaskList tasks={tasks} />
}

How map becomes components

map runs once per task and returns a new array of TaskItem elements. React renders that array and uses each key during future comparisons. A key is for React and is not automatically available inside TaskItem; pass id={task.id} separately if the child needs it.

Keys need only be unique among siblings. Generate an id when data is created, not while mapping on every render, or the identity keeps changing.