Lists Components

If your component renders a list of nodes, instead of making a separate component for the list items, we can generate them like:

const SearchSuggestions = (props) => {
  const SearchSuggestion = (listItem) => (
    <li key={listItem.id}>
      {listItem.name} {listItem.id}
    </li>
  );

  return <ul>{props.listItems.map(SearchSuggestion)}</ul>;
};

If things get more complex or you want to use this component elsewhere, you should be able to copy/paste the code out into a new component. Don’t prematurely componentize.