Can you guide me on how to manipulate style attributes in React? I have experience with query selectors, but I've learned that they may not be the best approach due to state changes in React. Specifically, how can I access and update style attributes in React from a different element's event?
const elements = document.querySelectorAll(".option-item");
function changeBackground() {
elements.forEach((element) => {
element.style.background = "red";
});
}
<div className="options-panel" onMouseOver={changeBackground}>
<div className="option-item">1</div>
<div className="option-item">2</div>
<div className="option-item">3</div>
<div className="option-item">4</div>
</div>
.options-panel{
background-color:black; //<<---when I hover over this corresponding element
}
.option-item{
background-color:blue //<<---all elements with this classname change to "red"//
}