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 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 (
{ => {
return <Text key={}>{}</Text>;

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

<StarshipList allStarships={allStarships}>

Be the first to receive insightful articles and actionable resources that help you to elevate your skills.