/Javascript/React/Onclick toggle class react

Onclick toggle class 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 vote142 views1 answer
When reload the page the route gone in react js laravel
Javascript React
0 vote104 views1 answer
Error: bundling failed: Error: Unable to resolve module react-native-community/toolbar-android
Javascript React
0 vote111 views1 answer
Web-vitals react
Javascript React
0 vote119 views1 answer
Nested navigation react native
Javascript React
0 vote103 views1 answer
Svg as a component react
Javascript React
0 vote114 views1 answer
How to hide footer in specefic pages in react router
Javascript React
0 vote100 views1 answer
Add clickable link to image in react native
Javascript React
24 votes155 views3 answers
Reactjs sass setup
Javascript React
23 votes101 views3 answers
Copy text to clipboard javascript react
Javascript React
0 vote106 views1 answer
How to disable keyboard calender input in material ui datepicker reactjs
Javascript React