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

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" }

Answer 4

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 5

You must save the previous state. You could even make previous state part of your actual state - but I'll leave that as an exercise for the OP (Note: you could preserve a full history of previous states using that technique). Unfortunately I cannot yet write examples from the top of my head using the new hooks feature:

class MyComponent extends ReactComponent {
  prevState = {}
  state = {
    isActive: false,
    // other state here
  }

  handleClick = () => {
    // should probably use deep clone here
    const state = Object.assign({}, this.state);

    this.setState(state.isActive ? this.prevState : Object.assign(state, { 
      isActive: true,
      // other state here
    });

    this.prevState = state;
  }

  render() {
    return <button onClick={this.handleClick}>Toggle State</button>
  }
}

Answer 6

in state:

this.state = {toggleBtn: ""}

in your button:

<button key="btn1" onClick={() => this.clickhandler(btn1)}>
   {this.state.toggleBtn === ID? "-" : "+"}
</button>

in your clickhandler:

clickhandler(ID) {

if (this.state.toggleBtn === ID) {
        this.setState({ toggleBtn: "" });
    } else {
        this.setState({ toggleBtn: ID});
    }