Reactjs Lists and Keys documentation question?

Question

React

https://codepen.io/gaearon/pen/jrXYRR?editors=0011
https://reactjs.org/docs/lists-and-keys.html
This is the part

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

Here, an array is passed as a key as a string? Or what? I do not understand

Answer 1

You may not have noticed, but the array in the examples is called numbers , and the callback argument to which the array element is passed is number .
Initial data:

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

The result of executing the map method , in the form of 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>,
]

Result as JS :
After rendering the array:

<ul>
  {listItems}
</ul>

we get the following html:

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

You can read about the map array method here .