Use the map() method in Javascript to iterate over the numbers array. Generate a new array listItems by changing each element in the array to a <li> tag:

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(
  <NumberList numbers={numbers} />.document.getElementById("root"));Copy the code

But you see a warning: A key should be provided for list items. This means that when you create an element, you must include a special key attribute. Assign a key attribute to each list element to resolve the above warning.

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

const numbers = [1.2.3.4.5];
ReactDOM.render(
  <NumberList numbers={numbers} />.document.getElementById("root"));Copy the code

key

Key helps React identify which elements have changed, such as being added or removed. Each element in the array should be assigned a definite identity.

An element’s key should ideally be a unique string that the element has in the list. In general, we use the id in the data as the element key:

const todoItems = todos.map((todo) = > <li key={todo.id}>{todo.text}</li>);
Copy the code

When an element has no specified ID, as a last resort you can use the element index index as key:

const todoItems = todos.map((todo, index) = > <li key={index}>{todo.text}</li>);
Copy the code

If the order of list items can change, it is not recommended to use an index as a key because doing so can lead to poor performance and may cause component state problems. If you choose not to specify an explicit key, React will default to using indexes as the key for list items.

Extract components with keys

The element’s key makes sense only if it is placed in the context of the nearest array.

For example, if you extract a ListItem component, you should leave the key on this element in the array, not in the ListItem component

  • Element. 

    function ListItem(props) {
  const value = props.value;
  return (
    / / error! You don't need to specify key here:
    <li key={value.toString()}>{value}</li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) = > (
    / / error! The element's key should be specified here:
    <ListItem value={number} />
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1.2.3.4.5];
ReactDOM.render(
  <NumberList numbers={numbers} />.document.getElementById("root"));Copy the code

    Correct examples:

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

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) = > (
    / / right! The key should be specified in the context of the array
    <ListItem key={number.toString()} value={number} />
  ));
  return <ul>{listItems}</ul>;
}

const numbers = [1.2.3.4.5];
ReactDOM.render(
  <NumberList numbers={numbers} />.document.getElementById("root"));Copy the code

    The key must only be unique between sibling nodes

    A key used in an array element should be unique among its siblings. However, they need not be globally unique. When we generate two different arrays, we can use the same key value:

    function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
  const content = props.posts.map((post) = > (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  { id: 1.title: "Hello World".content: "Welcome to learning React!" },
  { id: 2.title: "Installation".content: "You can install React from npm."},]; ReactDOM.render(<Blog posts={posts} />.document.getElementById("root"));
Copy the code

    The key will pass information to React, but not to your components. Can’t use the value of the key attribute through props. Key. Pass this value explicitly using another attribute name such as id:

    const content = posts.map((post) = > (
  <Post key={post.id} id={post.id} title={post.title} />
));
Copy the code

    Embed map() in JSX

    JSX allows any expression to be embedded in braces, so the result returned by map() can be inlined:

    function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) => (
        <ListItem key={number.toString()} value={number} />
      ))}
    </ul>
  );
}
Copy the code