React - How To Change Classname By Index?

I created a simple logic: when you click on a certain block, the classname changes, but the problem is that when you click on a certain block, the classname changes and the rest of

Solution 1:

You can remember the selected index

Please reference the following code:

exportdefaultfunctionSelectGradientTheme(props) {
    const resultsRender = [];
    const [selectedIndex, setSelectedIndex] = useState(false);

    constsetBorder = (index) => {
        setSelectedIndex(index);
    };

    for (var i = 0; i < GradientThemes.length; i += 3) {
        resultsRender.push(
            <divclassName={"SelectThemePictures_Separator"}>
                {
                    GradientThemes.slice(i, i + 3).map((col, index) => {
                        return (
                            <divkey={index}className={index === selectedIndex ? 'selectBorder' :null}
                                onClick={() => props.SideBarPageContent(col)|| setBorder(index)}>
                            </div>
                        );
                    })
                }
            </div>
        )
    }


    return (
        <divclassName="SelectThemeWrapper">
            {resultsRender}
        </div>
    );
};