/Javascript/React/Toggle classname onclick react

Toggle classname onclick react

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

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

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

Source: stackoverflow.com

Onclick toggle class react

import React, { useState } from "react";import "./styles.css";

export default function App() {
  const [isActive, setActive] = useState("false");
  const handleToggle = () => {
    setActive(!isActive);  };
  return (
    <div className={isActive ? "app" : null}>      <h1>Hello react</h1>
      <button onClick={handleToggle}>Toggle class</button>    </div>
  );
}

-1

Source: reactgo.com

Similar codes

0 vote304 views1 answer
Concatenate state with previous state in react redux
Javascript React
0 vote328 views1 answer
Hot loading react native shortcut key
Javascript React
36 votes285 views2 answers
Ref hook in react
Javascript React
10 votes373 views2 answers
Generate random string react
Javascript React
3 votes410 views3 answers
Center horizontally react native
Javascript React
0 vote347 views1 answer
Create react app cloudfront invalidation
Javascript React
4 votes312 views1 answer
How to use font awewsome in react app
Javascript React
1 vote337 views1 answer
Double matrix iteration in react
Javascript React
0 vote293 views1 answer
Android studio react native plugins
Javascript React
2 votes310 views3 answers
React cdn
Javascript React