how to change the background color of a button without affecting the other buttons in React JS-CodePudding

I would like to change the background color from the DIV when I click without affecting other buttons in the same line. I hope you could help me.. THank you!

For example when I click on the first DIV Developers, the background color change, however, it affects the other buttons, I want to affect only the button I click to change the background color.

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg'
import { Dropdown } from '../ui/dropdown/Dropdown';

export const Navbar = () => {

    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);
    const [isActive, setIsActive] = useState(false);

    const handleClick = () => {
        setIsActive(current => !current);
        setIsOpen(!isOpen);
    };

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };
return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    <div  
                        style={{
                            backgroundColor: isActive ? 'salmon' : '',
                            color: isActive ? 'white' : '',
                        }}
                        onClick={handleClick}
                    >
                        <strong className="label_strong">Enterprise</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div
                        style={{
                            backgroundColor: isActive ? 'salmon' : '',
                            color: isActive ? 'white' : '',
                        }}
                        onClick={handleClick}
                    >
                        <strong className="label_strong">Developer</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>            
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
                
            </div>
            {
                isOpen && (
                    <Dropdown/>
                )
            }
        </>
    )
}

CodePudding user response：

You should have a number state instead of a boolean state for isActive

const [isActive, setIsActive] = useState(); //leave it empty as no active buttons initially

And then you should have another constant variable for restrict button state values

const BUTTONS = {
   enterprise: 1,
   developer: 2,
}

Modify handleClick accordingly

const handleClick = (buttonId) => {
   setIsActive(buttonId);
   setIsOpen(!isOpen);
};

The last part is integrating button ids with your div elements and adding conditional renderings based on isActive value

<div  
                        style={{
                            backgroundColor: isActive === BUTTONS.enterprise ? 'salmon' : '',
                            color: isActive === BUTTONS.enterprise ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.enterprise)}
                    >
                        <strong className="label_strong">Enterprise</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div
                        style={{
                            backgroundColor: isActive === BUTTONS.developer ? 'salmon' : '',
                            color: isActive === BUTTONS.developer ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.developer)}
                    >
                        <strong className="label_strong">Developer</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>

The full possible modification

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg'
import { Dropdown } from '../ui/dropdown/Dropdown';

const BUTTONS = {
   enterprise: 1,
   developer: 2,
}

export const Navbar = () => {

    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);
    const [isActive, setIsActive] = useState(); //leave it empty as no active buttons initially

    const handleClick = (buttonId) => {
        setIsActive(buttonId);
        setIsOpen(!isOpen);
    };

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };
return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    <div  
                        style={{
                            backgroundColor: isActive === BUTTONS.enterprise ? 'salmon' : '',
                            color: isActive === BUTTONS.enterprise ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.enterprise)}
                    >
                        <strong className="label_strong">Enterprise</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div
                        style={{
                            backgroundColor: isActive === BUTTONS.developer ? 'salmon' : '',
                            color: isActive === BUTTONS.developer ? 'white' : '',
                        }}
                        onClick={() => handleClick(BUTTONS.developer)}
                    >
                        <strong className="label_strong">Developer</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                    <div className={style ? 'div_main_button' : 'div_main_button_change_color'} onClick={toggling}>
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i className={styleIcon ? "fa-solid fa-angle-down" : "fa-solid fa-angle-up"} ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>            
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
                
            </div>
            {
                isOpen && (
                    <Dropdown/>
                )
            }
        </>
    )
}

CodePudding user response：

So what I have done is isolate the clicked state of the div within a separate functional component. This way one click would not affect the other.

import React, { useState } from 'react';
import './navbar.css';
import Logo from '../../assets/img/ubuntu.jpg';
import { Dropdown } from '../ui/dropdown/Dropdown';

export const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [style, setStyle] = useState(true);
    const [styleIcon, setStyleIcon] = useState(true);

    const toggling = () => {
        setIsOpen(!isOpen);
        changeStyle();
        changeStyleIcon();
    };
    const changeStyle = () => {
        setStyle(!style);
    };
    const changeStyleIcon = () => {
        setStyleIcon(!styleIcon);
    };

    const handleClickHeadings = ['Enterprise', 'Developer'];

    return (
        <>
            <div className="div_main_navbar">
                <div className="div_main_title">
                    <div className="div_main_button">
                        <img className="img_logo" src={Logo} alt="logo" />
                    </div>
                    {handleClickHeadings.map((heading) => {
                        return (
                            <HandleClickDiv
                                heading={heading}
                                styleIcon={styleIcon}
                                isOpen={isOpen}
                                setIsOpen={setIsOpen}
                            />
                        );
                    })}
                    <div
                        className={
                            style ? 'div_main_button' : 'div_main_button_change_color'
                        }
                        onClick={toggling}
                    >
                        <strong className="label_strong">Community</strong>
                        <div className="div_icon">
                            <i
                                className={
                                    styleIcon ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'
                                }
                            ></i>
                        </div>
                    </div>
                    <div
                        className={
                            style ? 'div_main_button' : 'div_main_button_change_color'
                        }
                        onClick={toggling}
                    >
                        <strong className="label_strong">Download</strong>
                        <div className="div_icon">
                            <i
                                className={
                                    styleIcon ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'
                                }
                            ></i>
                        </div>
                    </div>
                </div>
                <div className="div_main_search_signin">
                    <div className="div_main_se_in">
                        <strong className="label_strong">Search</strong>
                    </div>
                    <div className="div_main_se_in">
                        <strong className="label_strong">Sign in</strong>
                    </div>
                </div>
            </div>
            {isOpen && <Dropdown />}
        </>
    );
};

// please provide appropriate component name
const HandleClickDiv = ({ heading, styleIcon, isOpen, setIsOpen }) => {
    const [clicked, setClicked] = useState(false);

    const onClick = () => {
        setClicked(!clicked);
        setIsOpen(!isOpen);
    };

    return (
        <div
            style={{
                backgroundColor: clicked ? 'salmon' : '',
                color: clicked ? 'white' : '',
            }}
            onClick={onClick}
        >
            <strong className="label_strong">{heading}</strong>
            <div className="div_icon">
                <i
                    className={
                        styleIcon ? 'fa-solid fa-angle-down' : 'fa-solid fa-angle-up'
                    }
                ></i>
            </div>
        </div>
    );
};