Вопрос по документации Reactjs Lists and Keys?

Question

[IvanIvanIvanIvanIvan]

https://codepen.io/gaearon/pen/jrXYRR?editors=0011
https://reactjs.org/docs/lists-and-keys.html
Вот эта часть

<li key={number.toString()}>
      {number}
    </li>

Тут в качестве ключа передается массив в виде строки? Или что? Не понимаю

Answer 1

[Антон Спирин]

Вы наверно не заметили, но массив в примерах называется numbers, а аргумент колбека в который передается элемент массива number.

Исходные данные:

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

Результат выполнения метода map, в виде JSX:

[
  <li key="1">1</li>,
  <li key="2">2</li>,
  <li key="3">3</li>,
  <li key="4">4</li>,
  <li key="5">5</li>,
]

Результат в виде JS:


После рендера массива:

<ul>
  {listItems}
</ul>

получаем следующий html:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

О методе массива map можете почитать тут.