how to put keys in a for loop in react-CodePudding

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

CodePudding user response：

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!

CodePudding user response：

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.