Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

Lists and Keys

2 lessonsAbout 12 minutesIntermediate

This part of the React Tutorial runs from Rendering Lists through to Keys Explained. There are 2 lessons here, and working through them takes about 12 minutes at a steady pace.

It follows on from Conditional Rendering, so finish that first if you have not already — the examples below assume you are comfortable with it.

Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.

  1. 1Rendering ListsTurn an array into React elements with map. Learn the pattern, how to filter and sort safely, and how to handle an empty list.
  2. 2Keys ExplainedKeys tell React which list item is which. See what goes wrong with index keys, why state attaches to the wrong row, and how to choose a key.
All of React TutorialNext: Forms and Inputs