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)