How can I dynamically update className with React js?

Question

I have a Collection component and when I click on a div in this component, I want to change both the className of the Collection component and the className of the first sibling component after the Collection component.

With UseState, I could only change the className of the component I was in.

My Collection.js looks like this:

const Collection = () => {
  const [toggleClass, setToggleClass] = useState(false);

  function handleClick() {
    setToggleClass((toggleClass) => !toggleClass);
  }

  let toggleClassCheck = toggleClass ? "passive" : "active";

  return (
    <React.Fragment>
      <div className={`step ${toggleClassCheck}`}>
        <div className="atrium">
          <span>Collection</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >

Can anyone help me on how to do the process I mentioned above?

score 0 · Answer 1 · answered Sep 01 '22 at 11:18

0

The React components rerender, based on the state. So you sould use your state to define the className instead of a boolean.

When your state changes the component will re-render.

Try this:

   const Collection = () => {
  const [toggleClass, setToggleClass] = useState("active");

  function handleClick() {
    setToggleClass((prevState) => prevState == "active" ? "passive" : "active" );
  }

  return (
    <React.Fragment>
      <div className={`step ${toggleClass}`}>
        <div className="atrium">
          <span>Collection</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleClick}
          >

answered Sep 01 '22 at 11:18

GSFZamai

64
6

The way you are using state, will not re-render your components because the dependence of state is in the toggleClassCheck variable, but, must be on the component – GSFZamai Sep 01 '22 at 11:19
Thank you for the improvement. I made the fix. So how can I change the first sibling component className after the click event occurs? – babyFrontendDeveloper Sep 01 '22 at 11:28
The same way you did with the main
, you should create a new state with the className value you want and pass it on the className prop. If the className is the same you're already changing, just pass it's value to the prop.
– GSFZamai Sep 01 '22 at 11:38

score 0 · Accepted Answer · answered Sep 01 '22 at 11:41

0

I didn't quite understand what you want, but if you want to impact sibling of component "Collection" executing function inside of "Collection" you definitely should try "ref". Via useRef hook.

export const Collection = () => {
const [toggleClass, setToggleClass] = useState(false);
const divRef = useRef(null);

function handleClick() {
  divRef.current.nextSibling.classList.toggle('active');
  divRef.current.nextSibling.classList.toggle('passive');
  setToggleClass((toggleClass) => !toggleClass);
}

let toggleClassCheck = toggleClass ? 'passive' : 'active';

return (
<>
  <div className={`step ${toggleClassCheck}`} ref={divRef}>
    <div className="atrium">
      <span>Collection</span>
    </div>
    <div className="content">
      <div className="moreThenOne" onClick={handleClick}>
        CLICK ZONE
      </div>
    </div>
  </div>
</>
);
};

answered Sep 01 '22 at 11:41

Nury Amandurdyev

131
1
5

it really worked very well. I'm grateful, thank you very much ^^ – babyFrontendDeveloper Sep 01 '22 at 11:53
This process works when switching from the first component to the second component. but when I write the same operations in the transition from the second component to the third, I do not get the desired result. How do I fix this? – babyFrontendDeveloper Sep 01 '22 at 14:31
yeah this is not about components it's more about DOM elements you change only DOM elements. Maybe you should watch your DOM structure to get things done using devtools of browser. And if it won't help you, you can write me contacts are here: https://muhammetnuramandurdyev.vercel.app/ – Nury Amandurdyev Sep 02 '22 at 06:35
I wrote the code in collection.js as you said, but when I write the same code for the next sibling component, the olculer.js component comes as "active" by default because there is a className change from the previous component. Could you please help me here? – babyFrontendDeveloper Sep 03 '22 at 15:02

How can I dynamically update className with React js?

2 Answers2