Pay attention to the CategoryMenu component as it renders the child menu items from the categories array prop:
render() { return ( <ul id="cat-menu"> {this.props.categories.map(c => ( <li key={c.name}> <CategoryMenuItem categoryName={c.name} checked={c.name === this.state.selectedCategoryName} onSelected={this.onCategorySelected} /> </li> ))} </ul> );}
In React, to render multiple children commonly through arrays, you use the map operator and return the rendered content for every item. In such cases, React promotes assigning a key prop for every item's rendered root element.
The key prop is a specialized prop that should represent the identity, meaning elements with the same key are considered interchangeable, which can better ...
