REACT – toggle class onclick

by

Use state. Reacts docs are here.

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.addActiveClass= this.addActiveClass.bind(this);
        this.state = {
            active: false,
        };
    }
    toggleClass() {
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    render() {
        return (
            <div 
                className={this.state.active ? 'your_className': null} 
                onClick={this.toggleClass} 
            >
                <p>{this.props.text}</p>
            </div>
        )
  }
}

class Test extends Component {
    render() {
        return (
            <div>
                <MyComponent text={'1'} />
                <MyComponent text={'2'} />
            </div>
        );
    }
}

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. React: “this” is undefined inside a component function
  3. Why do we need middleware for async flow in Redux?
  4. Push method in React Hooks (useState)?
  5. “this” is undefined inside map function Reactjs
  6. How do I conditionally add attributes to React components?
  7. React component initialize state from props
  8. How do I test axios in Jest?
  9. How to display binary data as image in React?
  10. Can’t build React/Next project – found page without a React Component as default export (context api file)
  11. ES6 modules implementation, how to load a json file
  12. Sending Request body for GET method in AXIOS throws error
  13. Recommended way of making React component/div draggable
  14. React: why child component doesn’t update when prop changes
  15. How to store Configuration file and read it using React
  16. Difference between declarative and imperative in React.js?
  17. How do I setState for nested object?
  18. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  19. React eslint error missing in props validation
  20. useEffect is running twice on mount in React
  21. React – useState – why setTimeout function does not have latest state value?
  22. Matched leaf route at location “/” does not have an element
  23. “You may need an additional loader to handle the result of these loaders.”
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. How to mock React component methods with jest and enzyme
  26. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  27. Deep nested array of objects not rendering
  28. create-react-app is showing all my code in production, how to hide it?
  29. Why would we use useEffect without a dependency array?
  30. Get scroll position with Reactjs

Leave a Comment