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;

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

import {useState} from 'React'

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,
    }
])

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>
    )

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}>

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

Then, import it in your app:

import {v4 as uuidv4} from 'uuid'

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(),
    }
])

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

console.log(data[0].id);

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.

Comments

[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!

[Ustariz Enzo]

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