How to change css style of a collection of objects from event of another in React?

Question

How do I change/add/remove style attributes in React? I am used to query selector but I understand that isn't the best way due to state changes in React. In general how do i access style attributes in react and change them from another element event?


const elements = document.querySelectorAll(".option-item")

function changeBackground() {
    elements.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"//
}

score 1 · Answer 1 · answered Jun 16 '21 at 19:40

1

the reason is you pass event to your function and try to define which property of event you want to call. in your case, you need to get the target. so try like this :

const elements = document.querySelectorAll(".option-item")

function changeBackground(e) {
    e.target.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>

answered Jun 16 '21 at 19:40

reza makhdomi

519
4
6

that was an error actually on my part, in that situation the event would change the "options-panel" background if it was e. I actually want to keep the "options-panel" background the same color but change the other "option-items" to red when I fire the chanegbackground function. I updated it – lache Jun 16 '21 at 19:45
so basically change the style of one or multiple elements, but from another (or parent) element. – lache Jun 16 '21 at 19:48
for change parent you can try like this `e.currentTarget.parentElement` and for change child of element you can try `e.currentTarget.childNodes`. by the way, you have this option to try them with `e.target.parentElement` and `e.target.childNodes` – reza makhdomi Jun 16 '21 at 20:23
if you want to know what is different between `e.target` its good to see [this answer](https://stackoverflow.com/a/10086501/11544999) – reza makhdomi Jun 16 '21 at 20:25
thank you for trying to help although its not exactly what i was looking for since this project is in react. but i did find my answer. – lache Jun 17 '21 at 12:45

score 0 · Answer 2 · answered Jun 16 '21 at 19:44

0

I just want to support the previous answer and add that, you will probably need to add the onMouseLeave handler to reset the element's original background.

answered Jun 16 '21 at 19:44

Pablo Gnesutta

31
1

score 0 · Answer 3 · answered Jun 17 '21 at 12:53

//SET THE ATTRIBUTES VALUES YOU WANT IN STATE FIRST//
const [panelWidth, setPanelWidth] = useState("50px");
const [opacity, setOpacity] = useState(0);


//MY FUNCTIONS CHANGES OPACITY AND WIDTH VALUE//
function toggleStretch() {
    if (panelWidth === "50px") {
      setPanelWidth("300px");
      setOpacity(1);
    } else if (panelWidth === "300px") {
      setPanelWidth("50px");
      setOpacity(0);
    }
  }

//USE YOUR EVENT TO CALL A FUNCTION AND SET THE ATTRIBUTES BY PASSING STATE VALUE AS A STYLE PROP I CHOSE MOUSEOVER//

  <div
        className="options-panel"
        style={{ width: panelWidth }}
        onMouseOver={toggleStretch}
        onMouseLeave={toggleStretch}
      >
        <div className="options-item">
          <div>
            <FontAwesomeIcon icon={faHome}></FontAwesomeIcon>
          </div>
          <p style={{ opacity }}> Home</p>
        </div>
        <div className="options-item" onClick={toggleListHandler}>
          <div>{iconState ? <FontAwesomeIcon icon={faFolder} /> : <FontAwesomeIcon icon={faFolderOpen} />} </div>
          <p style={{ opacity }}> About</p>
        </div>
  </div>

For smooth transitions just add to your CSS file:

.options-panel {
 
  transition-duration: 0.5s;
}

.options-item {

  transition-duration: 0.3s;
}

How to change css style of a collection of objects from event of another in React?

3 Answers3