how to put keys in a for loop in react

Question

I have a key problem in my condition in react with a for loop, it gives me a warning

I inserted my keys correctly, however I think but i have : "Warning: Each child in a list should have a unique "key" prop." error

    //Création des boutons
    const buttons = [];
    
    for (const page of pageNumbers) {
        //if page is first or endPage
        if (page === 1 || page === totalPages) {
            buttons.push(
                <>
                    <li
                        key={"1"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnPaginate btn btn-link"
                            variant="link"
                            value={page}
                            onClick={() => props.handlePaginate(page)}
                        >
                            {page}
                        </Button>
                    </li>
                </>
            );
        }
        //if page is not first or not endPage
        else if (page >= currentPage - 1 && page <= currentPage + 1) {
            buttons.push(
                <>
                    <li
                        key={"2"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnPaginate btn btn-link"
                            variant="link"
                            value={page}
                            onClick={() => props.handlePaginate(page)}
                        >
                            {page}
                        </Button>
                    </li>
                </>
            );
        }
        //show left dots 
        else if (showDotsLeft && page === 2) {
            buttons.push(
                <>
                    <li
                        key={"3"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnDotsLeft btn btn-link"
                            variant="link"
                            key="dots-left"
                        >
                            ...
                        </Button>
                    </li>
                </>
            );
        }
        //show right dots
        else if (showDotsRight && page === currentPage + 2) {
            buttons.push(
                <>
                    <li
                        key={"4"}
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            className="page-link btnDotsRight btn btn-link"
                            variant="link"
                        >
                            ...
                        </Button>
                    </li>
                </>
            );
        }
    }

I inserted my keys correctly, however I think but i have : "Warning: Each child in a list should have a unique "key" prop." error

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — SuleymanSah, Dec 29 '22 at 13:27

Arian Hosseini · Answer 1 · 2022-12-29T14:26:24.430

0

You should add a key to each child as well as each element inside children.

This way React can handle all the minimal DOM changes,

So you need to set key prop for each <Button /> too!

edited Dec 29 '22 at 14:26

answered Dec 29 '22 at 13:15

Arian Hosseini

138
1
1
11

thanks for the reply. So I have to put keys on the
and on the

Rémy Legrand

Dec 29 '22 at 13:33

Yes, and it would be better not to use React Fragments in your example. – Arian Hosseini Dec 29 '22 at 14:02

Solution trouvée...

– Rémy Legrand Dec 29 '22 at 15:35

score 0 · Accepted Answer · answered Dec 29 '22 at 13:32

0

The key needs to be added into the top level element.

In your example you have a React.Fragment as a top level element instead of the <li> you added the key into.

answered Dec 29 '22 at 13:32

panukettu

41
1
4

Rémy Legrand · Answer 3 · 2022-12-29T15:41:36.423

solution found... Use <React.Fragment key={page}> rather than <>

<React.Fragment key={page}>
                    <li
                        key="1"
                        className={`page-item ${
                            currentPage == page ? "active" : ""
                        }`}
                    >
                        <Button
                            key="2"
                            className="page-link btnPaginate btn btn-link"
                            variant="link"
                            value={page}
                            onClick={() => props.handlePaginate(page)}
                        >
                            {page}
                        </Button>
                    </li>
                </React.Fragment>

Thanks for your comments and aids

how to put keys in a for loop in react

3 Answers3