Rendering A List With React

Rendering A List With React

Creating a list in the browser is a super common technique for displaying a list of data. In this tutorial, we’ll learn about how to create a list of items using React. It’s a little different from how you might approach this when using some of the other popular UI frameworks like Vue or Angular. In those other frameworks, you have customized directives such as v-for or ng-for to iterate directly in html. With react, the approach is to use native JavaScript for iteration. So in React you can use the map() function to iterate over an array and create a list. Let’s see how to do that now.


Creating A Static List

Ok first things first. Before we even use any JavaScript arrays to help with creating a list, let’s remind ourselves how to simply render a static list. So with this markup, we should be in business.

react static list


Rendering A List Dynamically

To render a list dynamically in React, we start by adding a property to the state object. We can populate that property with an array of strings like so.

Great. Now we want to move to the render() method to render each list item dynamically. This is where in other frameworks you would reach for ng-for or v-for type directives. We can’t do that in React. Instead we reach for the built-in map function in JavaScript. We can use the map function to map each item in the array to a react element. Notice that we pass an arrow function as an argument to the map function.

At this point we do have a list, but each li is empty.
react map function list

How can we fix that? All we need to do is use the curly braces in the JSX expression to output each list item like so.

There we go! We have our dynamically rendered list using React along with the JavaScript map function.

Just to prove that the list is dynamic, we can change the data in the listitems array and see what happens.

react dynamic list via map


Each child in a list should have a unique “key” prop

We now have a list rendering out nicely but we are not done. By inspecting the console in the browser, we now notice a warning message in red text.

index.js:1446 Warning: Each child in a list should have a unique “key” prop.

Check the render method of Item. See https://fb.me/react-warning-keys for more information.

What is happening here? The reason React is complaining about this, is because it needs to uniquely identify each item in our list. If the state of this react element in the virtual dom changes, React needs to quickly figure out which element changed and where in the real dom it needs to reflect that change. Of so how do we fix this? Well, anytime we use the map function to render a list of items, we need to set the key attribute on the li of the list. Here is how to do that.

So in the highlighted line above, notice we have now added key set to a dynamic value on the li item. Now in this case, each listitem is a string, and each string is unique. Therefore, we can use listitem as the value for key. Once again we inspect the developer tools console and we no longer get the error of Each child in a list should have a unique “key” prop. In other scenarios the array your dealing with might contain objects. In that case each object could have a unique id, and that would be the value for the key attribute. Also, this unique key is unique per list rendered, not for the whole application.


Rendering an Array of Objects as a List

To finish up, let’s render out a list where the state property contains an array of objects. That way we can see how the unique key approach works when you are using objects instead of simple strings.

]
react render array of objects as list


Read More about List Rendering In React


Rendering A List With React Summary

As we have seen rendering a list in React is not so bad. While React does not have the syntactic sugar of ng-for or v-for, we can simply use the JavaScript map function to produce the same effect. That seems to be a common theme in React: Using native JavaScript to accomplish certain tasks while letting React manage the virtual dom.