/Javascript/React/React component key prop

React component key prop

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

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside 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')
);

Source: reactjs.org

Similar codes

6 votes302 views1 answer
React native docs
Javascript React
2 votes367 views2 answers
Past value from parent in reactjs
Javascript React
36 votes278 views2 answers
Ref hook in react
Javascript React
21 votes304 views4 answers
React font awesome npm
Javascript React
0 vote256 views1 answer
React useState vs variable
Javascript React
0 vote296 views2 answers
React firebase hooks
Javascript React
1 vote336 views1 answer
Close exit app react native
Javascript React
0 vote296 views1 answer
Make a ReactNative component take the height and width of the current window
Javascript React
0 vote302 views1 answer
React computed example
Javascript React
0 vote309 views1 answer
React-native-safe-area-context
Javascript React