How to toggle state in React Native

Question

I am developing a light weight project using React Native, and I encountered some setbacks, I couldn't figure it out. :(

I have a page that contains a Yes and a No button and a Yes/No render area, users will be able to click on either of the buttons. According to the users' choice, an avatar will appear in the correct render area (click yes, the avatar will be in the Yes area...). But one user can only be able to click once. I am trying to solve this using state and setState , but couldn't get it to work.

I have: this.state = {invitedState : false} and a function (part)

    onPress={() => {
      if (this.state.invitedState) {
        onPress();
      }
      this.setState(prevState => ({
        invitedState: !prevState.invitedState,
      }));
    }}

Should I not use setState to solve this problem? thanks!

Answer 1

I think I understand your problem. Something like this?

  state = {
    toggleUI: true,
    userToggled: false
  };

  handleToggleUI = e => {
    this.setState(currentState => {
      if ( this.state.userToggled === false ) {
        return {
          toggleUI: !currentState.toggleUI,
          userToggled: true
        };  
      }
    });
  };

Answer 2

You could try:

onPress{() => {
    let tempVar = this.state.invitedState ? false : true;
    this.setState({invitedState: tempVar});
}