react toggle class

react-toggle-class.js

import React, { useState } from "react";


//Способ 1
const Example = () => {
  const [ isActive, setActive ] = useState(false);

  const handleToggle = (e) => {
    e.preventDefault();
    setActive(!isActive);
  };

  return (
    <div className={ `main-layoyut ${ isActive ? "hide-sidebar" : "" }` }>
      <a onClick={ handleToggle }>Toggle button</a>
    </div>
  );
}

export default Example;


//Способ 2
const Example = () => {

  const handleToggle = (e) => {
    e.preventDefault();
    document.querySelector('.main-layoyut').classList.toggle('active');
  };

  return (
    <div className="main-layoyut">
      <a onClick={ handleToggle }>Toggle button</a>
    </div>
  );
}

export default Example;