function ListItem(props) { return <li>{props.value}</li>; }

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

    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );
        

// Keys should be given to the elements inside the array to give the elements a stable identity
// The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
// When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort
// A good rule of thumb is that elements inside the map() call need keys.
// Keys Must Only Be Unique Among Siblings
// Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name

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