Learning React and trying to simply toggle a css class on body tag when a element in my component 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?
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>);
}
setState, the right question here is how to toggle class using vanilla JavaScript.