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

Answer 1

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!

Answer 2

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.

Answer 3

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