Learning React and trying to simply toggle a css class on body tag when a element in my ponent is clicked. I can't seem to find a good example on how to do it.

Here is how I would do it using Jquery.

function initNav() {
$(".hmbWrapper").click(function() {
    $('body').toggleClass('mobileNavActive');
});
}

What is the correct approach in React?

Learning React and trying to simply toggle a css class on body tag when a element in my ponent is clicked. I can't seem to find a good example on how to do it.

Here is how I would do it using Jquery.

function initNav() {
$(".hmbWrapper").click(function() {
    $('body').toggleClass('mobileNavActive');
});
}

What is the correct approach in React?

• javascript
• reactjs

Share Improve this question Follow edited Apr 29, 2018 at 16:41 user2300867 asked Apr 29, 2018 at 16:38 user2300867user2300867 60311 gold badge1414 silver badges2828 bronze badges 1

• You can do it using setState, the right question here is how to toggle class using vanilla JavaScript. – Adam Azad Commented Apr 29, 2018 at 16:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can do something like this, assuming you have a <div id="test">something</div> in the index.html file.

class App extends Component {
  toggleClass = () => {
    const oldClassName = document.getElementById('test').className;
    const newClassName = oldClassName === 'red' ? 'blue' : 'red'
    document.getElementById('test').className = newClassName
  }

  render() {
    return (
      <div>
        <p>
          click toggle to change colors below
        </p>
        <button onClick={this.toggleClass}>toggle</button>
      </div>
    );
  }
}

Working example here.

class App extends Component {
 toggleClass = (event) => {
   event.target.classList.toggle('selected')
}

render() {
 return (
  <div>
    <button onClick={this.toggleClass}>toggle</button>
  </div>
);
}}

if the toggled element is not part of React, you can do it in old fashion way using pure javascript.

class MyComponent extends React.Component {
  toggle = () => document.body.classList.toggle('mobileNavActive');

  render() {
    return <button onClick={this.toggle}>toggle</button>;
  }
}

const myComponent = () => {
    [state, setState] = useState('red');
    const colorHandler = () => {
        setState(state === 'red' ? 'blue' : 'red');
    }
    return (<button onClick={colorHandler}>toggle</button>);
}