Display a List in React by Looping Over an Array of Items

Share this video with your friends

Send Tweet

To display a list of items in react, we can map (or loop) over that list and return JSX from inside the map function:

    <div>
      {
        props.items.map(item => {
          return <p key={item.id}>{item.title}</p>
        })
      }
    </div>

Remember to always include a key attribute though! That lets React keep track of each list item internally, which gives you better performance, and may save you from subtle bugs