Basics - Lists & keys - correct usage of key. example 3

App.js

import React, { Component } from "react";

export class App extends Component {
  render() {
    const numbers = [1, 2, 3, 4, 5];
    return (
      <div>
        <NumbersList numbers={numbers} />
      </div>
    );
  }
}

function NumbersList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map(number => (
    <ListItem key={number.toString()} value={number} /> //use key only where map function is used
  ));
  return <ul>{listItems}</ul>;
}

function ListItem(props) {
  const value = props.value;
  return <li>{value}</li>; // dont use key here
}

export default App;