MENU


List

A mapped array represents the third way to define a component.

Keys help React identify which items have changed, are added, or are removed, and thus intelligently decide which elements to update and re-render. To enhance performance, unique keys should be given to the elements inside an array or in a list to give them a stable identity. Without keys, for instance, any insertion at the front of the children list will cause the whole list to be re-rendered.
RESETRUNFULL
<!DOCTYPE html><html><head></head><body><script src="https://unpkg.com/react@17/umd/react.development.js"
             crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        const numbers = [1, 2, 3, 4, 5];
        const listItems = numbers.map((number) =>
                                                                <li key={number.toString()}>{number}</li>);
        const myList = <ul>{listItems}</ul>
        ReactDOM.render(myList, document.querySelector('div'));
    </script>
    <div></div></body></html>

Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random() will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort. Using indexes for keys can negatively impact performance and may cause issues with the component state. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
RESETRUNFULL
const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>);
Keys only make sense in the context of the surrounding array.
RESETRUNFULL
<!DOCTYPE html><html><head></head>
  <body><script src="https://unpkg.com/react@17/umd/react.development.js"
              crossorigin></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
             crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        function ListItem(props) {
           const value = props.value;
           return (               // Wrong! There is no need to specify the key here:
              <li key={value.toString()}>{value}</li>
           );
        }
        function NumberList(props) {
            const numbers = props.numbers;
            const listItems = numbers.map((number) =>                // Wrong! The key should have been specified here:
                <ListItem value={number} />
         );
    return (<ul>{listItems}</ul>);
        }
        const numbers = [1, 2, 3, 4, 5];
        ReactDOM.render(<NumberList numbers={numbers} />,
                                  document.getElementById('root')
        );
    </script>
    <div></div></body></html>
We could inline the map() result, as JSX allows embedding JavaScript.
RESETRUNFULL
const numbers = [1, 2, 3, 4, 5];const myList = <ul>{numbers.map((number) =>
                            <li key={number.toString()}>{number}</li>)}</ul>ReactDOM.render(myList, document.querySelector('div'));

You can do the following to repeat a component numrow times.


RESETRUNFULL
<tbody>{Array(numrows).fill(<ObjectRow />)}</tbody>