React - toggle condition with hooks (change class upon click)

Question

import React from 'react'; 
import {useState} from 'react';


function BrandSlide() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = event => {
    // toggle isActive state on click
    setIsActive(current => !current);
  };
  return (
    <div className={isActive ? 'brand-slide in' : 'brand-slide out'} onClick={handleClick}>
      <div className="brand-toggle"> Explore now</div>
      <div className="box">
        <img src="/images/slide_in.png" />
        Explore all our expedition gears for your need
        <a href="/expeditions" target="_blank" className="btn-slide">
          Explore now
        </a>
      </div>
  </div>
  );
  }
  export default BrandSlide;

 

Answer 1

function MyComponent (props) {
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
    <div 
      className={isActive ? 'your_className': ''} 
      onClick={toggleClass} 
    >
      <p>{props.text}</p>
    </div>
   );
}