List Rendering in React: A Practical Tutorial for Beginners

In today's video, we will learn how to render lists in React.

#react #reactjs #reactjstutorial

Rendering lists, or any sets of data, is very common during application development. Lists could be a list of blog posts, to-do's, shopping cart, or news feed. All these items have one thing in common - they are lists of data.

Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!

✅ Follow Me:

To create a component that returns the list of items in React, we use JavaScript array methods. Since JSX is just JavaScript, we can use any JavaScript method when returning JSX markup.

Now, let's take a look at the console. Here we have an error from React that says, "Warning: Each child in a list should have a unique “key” prop." The thing with this warning is the mechanism of how React treats lists. We need to set the "key" prop inside every list element clearly. When our list is modified (filtered, sorted, reordered, or items are added or deleted), React will know exactly which part of the page should be re-rendered.

To better understand it, imagine that you have some files on your computer desktop with no names. You would have to remember each file by its order. You can do that, but when the order of files changes, everything will be messed up.

Here are the rules for keys:

- They should be unique inside the particular array.