[FIXED] How to get prop value in setIsHovering

Issue

const [isHovering, setIsHovering] = useState({box1: false, box2: false, box3: false, box4: false});

const handleMouseOver = (e,box_id) => {
    setIsHovering({box_id: true});
};

const handleMouseOut = (e,box_id) => {
    setIsHovering({box_id: false});
};

return (
<div className="service_body_element">
    <div className="service_body_el" onClick={ (e) => handleMouseOver(e, "box1") }>
        <img src="" alt=""
             className="service_body_el_img"/>
        <h3 className="service_body_el_title">Business<br/>Advisory</h3>
    </div>
</div>
)

How i can get "box_id" prop, to change state with setIsHovering? react project

Solution

You can access the key by variable by using [] around the key. Here I'm also returning all previous data unchanged because in your current example all other boxes would get overwritten.

const handleMouseOver = (e,box_id) => {
    setIsHovering((v) => ({ ...v, [box_id]: true }));
};

Answered By - AbsoluteZero
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)