Change State whenever button is clicked back and forth in React?

Question

So I know how to change state when the button is clicked once, but how would I change the new state back to the previous state when the button is clicked again?

Answer 1

You can just toggle the state.

Here's an example using a Component:

class ButtonExample extends React.Component {
  state = { status: false }

  render() {
    const { status } = this.state;
    return (
      <button onClick={() => this.setState({ status: !status })}>
        {`Current status: ${status ? 'on' : 'off'}`}
      </button>
    );
  }
}

Here's an example using hooks (available in v16.8.0):

const ButtonExample = () => {
  const [status, setStatus] = useState(false);

  return (
    <button onClick={() => setStatus(!status)}>
      {`Current status: ${status ? 'on' : 'off'}`}
    </button>
  );
};

You can change the 'on' and 'off' to anything you want to toggle. Hope this helps!

Answer 2

Here is my example of show on toggle by using React Hook without using useCallback().
When you click the button, it shows "Hello" and vise-versa.
Hope it helps.

const IsHiddenToggle = () => {
  const [isHidden, setIsHidden] = useState(false);

  return (
      <button onClick={() => setIsHidden(!isHidden)}>
      </button>
      {isHidden && <p>Hello</p>}
  );
};

Answer 3

This will toggle to previous and new value :

 constructor() {
        super();

      this.state = {
        inputValue: "0"
      }
    }

     render() {
     return (
     <div>
      <input
        type="button"
        name="someName"
        value={this.state.inputValue}
        onClick={() =>
         this.state.inputValue === "0"
         ? this.setState({
         inputValue: "1"
         })
         : 
        this.setState({
        inputValue: "0"
        })
        }
         className="btn btn-success"
      />
    </div>
     )
    }

Description :

If the current value = 0, then set the value to 1, and vice versa.

This is useful if you have a lot of inputs. So, each input has a different state or condition.

Answer 4

Consider this example: https://jsfiddle.net/shanabus/mkv8heu6/6/

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	buttonState: true
    }
    this.toggleState = this.toggleState.bind(this)
  }
  
  render() {
    return (
      <div>
      <h2>Button Toggle: {this.state.buttonState.toString()}</h2>                
        <button onClick={this.toggleState}>Toggle State</button>
      </div>
    )
  }
  
  toggleState() {
  	this.setState({ buttonState: !this.state.buttonState })
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Here we use a boolean true/false and flip between the two states. If you are looking to use some other custom data as your previous state, just create a different variable for that.

For example:

this.state = { previousValue: "test", currentValue: "new thing" }