li key attribute 1

li key attribute

//A “key” is a special string attribute you need 
//to include when creating lists of elements.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    
  • {number}
  • ); return (
      {listItems}
    ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );

    Here is what the above code is Doing:
    1. It builds a list of

  • elements.
    2. It stores the result in a variable named listItems.
    3. It renders a

      element, and inside of it, the listItems variable.

      The result is a list of numbers.

      The key is a special string attribute you need to include when creating lists of elements.

      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. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

  • Similar Posts