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 optimize performance if the collection changes.
Note
You can read more about list rendering in React here: https://reactjs.org...