DEV Community

Cover image for How to render a list with React
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

How to render a list with React

Hey fellow creators,

You don't know how to render a list with React? Jump in to learn how to do it!

If you prefer to watch the video version, it's right here :

1. Create a list!

Create a simple React app and add an h1 to your app:

function App(){
    return (
        <div className="container">
            <h1>A React List</h1>
        </div>
    )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

To create a list, you need to use the state. Let's import it:

import {useState} from 'React'
Enter fullscreen mode Exit fullscreen mode

Then, you need to create some dummy data to feed our state.

const [data, setData] = useState([
    {
    txt: "Txt 1",
    id: 1,
    },
    {
    txt: "Txt 2",
    id: 2,
    },
    {
    txt: "Txt 3",
    id: 3,
    }
])
Enter fullscreen mode Exit fullscreen mode

Creating an ID like that isn't the best way to do it, but we'll see a tool later on that you can use in order to do it better. For now, let's keep it like that!

2. Render the list with the map() method!

Let's render the list with the map() method. For each item, you'll render an li that contains the text from the data:

return (
    <div className="container">
        <h1>A React List</h1>
        {data.map(item => {
            return (
                <li>
                  {item.txt}
                </li>
                )
            })}
        </div>
    )
Enter fullscreen mode Exit fullscreen mode

As you can see, it's working, however in the console there'll be an error saying that each child in a list should have a unique "key" prop.
React needs that key to understand what has been created, especially if something is deleted or modified.

Therefore you can simply add the key prop to the li tag with the id from the data:

<li key={item.id}>
Enter fullscreen mode Exit fullscreen mode

If you refresh the page, you'll no longer see the error in the console!

3. There's a better way to have a unique id for each of the items in your list!

As said before, the id from the data isn't very secure since they're not unique if it's used in a huge app. In order to fix that, you'll add an uuid package. In your terminal, install it:

npm install uuid
Enter fullscreen mode Exit fullscreen mode

Then, import it in your app:

import {v4 as uuidv4} from 'uuid'
Enter fullscreen mode Exit fullscreen mode

Finally, you can simply use that method in your data:

const [data, setData] = useState([
    {
    txt: "Txt 1",
    id: uuidv4(),
    },
    {
    txt: "Txt 2",
    id: uuidv4(),
    },
    {
    txt: "Txt 3",
    id: uuidv4(),
    }
])
Enter fullscreen mode Exit fullscreen mode

You can log it to see the unique and strong ids this method creates:

console.log(data[0].id);
Enter fullscreen mode Exit fullscreen mode

You now know how to render a list with React! Well done!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Top comments (2)

Collapse
 
zwacky profile image
Simon Wicki

Great dive into rendering lists, Enzo.

I consider using UUIDs for an ID a bit overkill, but correct non the less.
As long as the index from data.map(item, index) isn't used for the key attribute, which has unwanted side effects, all is fine. I mention this, because I've made that mistake myself and have seen it in other code bases, too.

Keep 'em posts coming!

Collapse
 
ziratsu profile image
Ustariz Enzo

Hey Simon, thanks for the comment.
It surely is much better if you can manage to have IDs from a database 👌