setState using Conditionals

JavaScript
1

Im doing the React Library course currently thought I would change the challenge a little bit it is essentially a 50/50 program that prints you win or you lose and tracks how many turns it takes. I wanted to add counters to track Wins and Losses as well but don’t understand how to implement it thus far this is what I tried first. My question is essentially how do you use Conditionals to setState I attempted this in the handleClick function with no luck.

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{
      this.props.fiftyFifty
        ?'You Win!'
        :'You Lose!'
    }</h1>;
  }
}

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      wins: 0,
      losses: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(expression) {
    this.setState(state => ({
        counter: state.counter + 1
    }));
    if (expression == true){
      this.setState(state => ({
        wins: state.wins + 1
      }))
    } else {
      this.setState(state => ({
        losses: state.losses + 1
      }))
    }
  }



  render() {
    const expression = Math.random() >= .5; 
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {/* Change code below this line */}
  <Results fiftyFifty={expression} />
        <p>{'Turn: ' + this.state.counter}</p>
        <p>{'Wins: ' + this.state.wins}</p>
        <p>{'Losses: ' + this.state.losses}</p>
      </div>
    );
  }
}
2

Cool.

I think in this case you’re going to want to store that value in state so it doesn’t change on rerenders and so you can manipulate what you want.

I also think here:

    this.state = {
      counter: 0,
      wins: 0,
      losses: 0
    };

One of those is redundant. I would get rid of counter - it is just the other two added together.

I would just have my handleClick handle everything.

Another advantage of handling it is way is that you can have it not run the game until the button is pressed - it doesn’t autorun when it loads. (If you want it to autorun, you can put it in the lifecycle method, compenentDidMount.)

This is what I came up with. There are ways to significantly simplify this, but I wanted to keep it at your level of learning.

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isWin: 0,
      wins: 0,
      losses: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const isWin = Math.random() >= 0.5;
    this.setState((state) => ({
      isWin,
      wins: isWin ? state.wins + 1 : state.wins,
      losses: isWin ? state.losses : state.losses + 1,
    }));
  }

  render() {
    const turns = this.state.wins + this.state.losses;
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {turns ? (
          <Results fiftyFifty={this.state.isWin} />
        ) : (
          <h1>No results yet.</h1>
        )}
        <p>{"Turn: " + turns}</p>
        <p>{"Wins: " + this.state.wins}</p>
        <p>{"Losses: " + this.state.losses}</p>
      </div>
    );
  }
}
3

Thanks so much that works amazing I understood my big issue was not being able to access the Math.random expression from the function so putting it straight in was a great solution, surprised I didn’t think of that. Didn’t even know you could use Ternary expressions not just for rendering. I learned heaps from this thanks so much

1 Like
4

Yeah, it’s pretty common to use ternary operators and also the short-circuit && for rendering. But be careful - some people like to use it for large blocks of code and that can be confusing. But here it’s short and clear.

5

And when in doubt, check the excellent React docs:

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.