Displaying a List

In React we can write JavaScript code with curly braces inside an HTML template. Let's see how we can show a list of items without writing repetitive elements in React.

Implementation

Creating a React App

React

Add an array of objects to a component

var items = [
  {id: 1, name: 'pencil'},
  {id: 2, name: 'eraser'},
  {id: 3, name: 'brush'},
]

React allows us to write JavaScript code inside curly braces in an HTML template. Open a curly brace and add an element you want to repeat for a certain amount items.

 

We are going to use the 'map' function to create a list as shown below. The key attribute is not required for this to work but if you do not specify each item with a unique Id, you will see an error in the console.

<ul>
  {
    items.map((i, idx) => (
      <li key={i.id}>{i.name}</li>
    ))
   }
</ul>

Completed Code Displayed on The Screen

Key missing errors

In this writing, we have seen how to create a list of items inside an HTML template with React.