Lists and keys

Basic List Component

Usually, you would render lists inside a component. You can use a map to render a list of items.

Keys

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

function StarshipList({allStarships}) {
  return (
    <Fragment>
      {allStarships.map((item) => {
        return <Text key={item.id}>{item.name}</Text>;
      })}
    </Fragment>
  );
}

// Usage
const allStarships = [
  { id: 'qwer', name: 'Death Star' },
  { id: 'erfg', name: 'X Wing' },
  { id: 'gkps', name: 'Millennium Falcon' }
];

<StarshipList allStarships={allStarships}>