How to toggle boolean state of a React component?

React is a popular JavaScript library used for building user interfaces. One common task in React is toggling the state of a boolean variable. In this blog post, we will explore different ways to toggle the boolean state of a React component.

Method 1: Using setState

The simplest way to toggle the boolean state of a React component is by using the setState method. The setState method allows us to update the state of a component and trigger a re-render.

Here’s an example of how to toggle a boolean state using setState:


import React, { Component } from 'react';

class ToggleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: false
    };
  }

  toggleState = () => {
    this.setState(prevState => ({
      isActive: !prevState.isActive
    }));
  }

  render() {
    return (
      
        
        State: {this.state.isActive.toString()}
      
    );
  }
}

export default ToggleComponent;

In the above example, we have a component called ToggleComponent with an initial state of isActive: false. The toggleState method is called when the button is clicked, and it uses the setState method to toggle the value of isActive.

Method 2: Using useState (React Hooks)

If you are using functional components with React Hooks, you can use the useState hook to toggle the boolean state.

Here’s an example of how to toggle a boolean state using useState:


import React, { useState } from 'react';

const ToggleComponent = () => {
  const [isActive, setIsActive] = useState(false);

  const toggleState = () => {
    setIsActive(!isActive);
  }

  return (
    
      
      State: {isActive.toString()}
    
  );
}

export default ToggleComponent;

In the above example, we use the useState hook to define the isActive state variable and the setIsActive function to update its value. The toggleState function is called when the button is clicked, and it toggles the value of isActive.

These are two common methods to toggle the boolean state of a React component. Choose the method that best suits your project and coding style.

Happy coding!

How to toggle boolean state of a React component?