Lists & Keys

Question 1

Rendering Multiple Components

Answer 1

You can build collections of elements and include them in JSX using curly braces {}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

We include the entire listItems array inside a <ul> element, and render it to the DOM:

render {

<ul>{listItems}</ul>

}</ul>

Question 2

Basic List Component

Answer 2

Usually you would render lists inside a component.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById('root')
);

When you run this code, you’ll be given a warning that a key should be provided for list items. A “key” is a special string attribute you need to include when creating lists of elements

Question 3

What is a key?

Answer 3

A “key” is a special string attribute you need to include when creating lists of elements. Keys help React identify which items have changed, are added, or are removed.
Keys should be given to the elements inside the array to give the elements a stable identity.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>
    {number}
  </li>
);

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>
  <li>
    {todo.text}
  </li>
);

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.

Question 4

Why not use indexes as keys?

Answer 4

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Question 5

How to add keys correctly.

Answer 5

Keys only make sense in the context of the surrounding array. A good rule of thumb is that elements inside the map() call need keys.

Example: Incorrect Key Usage:

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Example: Correct Key Usage:

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Question 6

Keys Must Only Be Unique Among Siblings

Answer 6

Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays.
Keys serve as a hint to React but they don’t get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:

const content = posts.map((post) =>

);