fiftyFifty-GameOfChance (additional feature)

Hello, I am practicing React, and I like this challenge a lot, so I decided to add a new feature for counting the number of wins (it is long and stupid but I am wondering if there’s another way to do it, since I’ve tried to minimize errors as possible) :


    constructor(props) {
        super(props);
        this.state ={
        	counter:0,
            win:0
        }
       this.handlePlay = this.handlePlay.bind(this);
       this.handleResult = this.handleResult.bind(this);
    }

 handlePlay(){
        this.setState({
            counter : this.state.counter +1,
        });
    }

    handleResult(){
        this.setState({
            win: this.state.win + 1,
            counter : this.state.counter +1
        })
    }
   

    render() {
    	   	let expression = Math.random() > .5;
        if(expression){
            return (
                <div>
                <button onClick={this.handleResult}> Play Again</button>
                <h1>{ expression ? "You Win" : "You Lose"}</h1>
                 <p>wins = {this.state.win}</p>
                <p>counter= {this.state.counter}</p>
                </div>  
                );
        }
        else{
            return(
             <div>
                <button onClick={this.handlePlay}> Play Again</button>
                <h1>{ expression ? "You Win" : "You Lose"}</h1>
                <p>wins = {this.state.win}</p>
                <p>counter= {this.state.counter}</p>
                </div>  
                );
        }   
    }

You can substantially reduce the number of lines of code (my solution have 30 lines). You need to rethink your app so you didn’t have to repeat your code like you have done in the render method.
handleResult is repetitive too, you have to create only one handler for this app. You can “roll the dice” and set the state in the same handler and you can create a message in the state and set it depending on the result and then you can render it.

I can help you more if you want. Just try again and come back for a feedback.

Good luck!

1 Like

Hi !
I thought about your suggestion and I gave it another try !
I still think that it can be improved with less lines of codes, but here is the last solution I’ve got - no repetition lol :

P.S.- Thank you !

constructor(props) {
        super(props);
        this.state ={
            result:'',
        	counter:0,
            win:0,
            lose:0
        }
       this.handlePlay = this.handlePlay.bind(this);
    }

 handlePlay(){
        let expression = Math.random() > .5;
        if(expression){
            this.setState({
            result: 'You Win !',
            win: this.state.win +1,
            counter : this.state.counter +1,
            });
            }
            else {
                this.setState({
                result: 'You lose !',
                lose: this.state.lose +1,
                counter: this.state.counter +1
                });   
            }
    }
   

    render() {
            return (
                <div>
                <button onClick={this.handlePlay}> Play Again</button>
                 <h1>{this.state.result}</h1>
                 <br/>
                 <p>wins = {this.state.win}</p>
                 <p>lose = {this.state.lose}</p>
                <p>counter= {this.state.counter}</p>
                </div>  
                );  
    }

Hi. I like that you have listened my tips but again you have a problem here:

You repeated almost the same set state in if and else statements. You can use ternary (conditional) operator. You are very close to the optimal solution. Give it another try and focus on the handlePlay function.

Reply again when you have done. Good luck !

Hello Lauren !
I gave it another try, even though I thought it won’t work but it Did !!
I’m still a newbie in React, and I truly appreciate your help/tips !
so here it is (I hope I got the same as your solution lol) :

 handlePlay(){
        let expression = Math.random() > .5;
         expression ? 
         this.setState({ win : this.state.win + 1, result: "You Win !"}) 
         :this.setState({ lose : this.state.lose +1, result: "You Lose !"})
        this.setState({
            counter : this.state.counter +1
        });
    }

Okay, it’s nice to see how you improve your code. You can have only one set state for your app and you can use some variables. I’ll give you my solution because I see you got the idea how to work. I don’t have a lose counter but is very similar.

handlePlay() {
    let expression = Math.random() > .5;
    const win = expression ? ++this.state.win : this.state.win;
    const result = expression ? "You win" : "You lose";
    this.setState({
      win,
      counter: this.state.counter + 1,
      result
    });
  }

And in the state declaration I have:

this.state = {
      counter: 0,
      win: 0,
      result: ""
    }

Looks like direct mutating of state to me :thinking:

Thanks @jenovs You are right. I don’t know why I didn’t realized this. It’s my mistake.