Rendering

What should go in the render function?

How does React decide to re-render a component?

What are some common patterns for conditional rendering in React?

// clean up things using an 'almost-component'
// for more see https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.2patc0o9c

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

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