.Render Conditionally from Props

JavaScript
1

Tell us what’s happening:
I have all right but the last one is wrong:
When the GameOfChance component is first mounted to the DOM and each time the button is clicked thereafter, a single h1 element should be returned that randomly renders either You Win! or You Lose!.

Can you help me to find the solution?

Your code so far


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

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      counter: this.state.counter + 1 // change code here
    });
  }
  render() {
    let expression = Math.random() > .5 ; // change code here
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        { /* change code below this line */ }
        <Results fiftyFifty = {this.expression} />
        { /* change code above this line */ }
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-conditionally-from-props/

3

So you tell me that this is wrong:
this.fiftyFifty ? “You win!” : “You lose!”

4

I think in your Results component you need this.props.fiftyFifty and I don’t think you should render this.expression in the other component, just render expression. Because “this” does not have a prop expression.

1 Like
6

So I should write something like that:
this.props.fiftyFifty ? "You win!" : "You lose!"

8

Yes now I find it thank you very much for your help and for your replay

9

class Results extends React.Component {

constructor(props) {

super(props);

}

render() {

return (

  <h1>

  {

 this.props.fiftyFifty ? "You win!" : "You lose!"

    /* change code here */

  }

  </h1>

)

};

};

class GameOfChance extends React.Component {

constructor(props) {

super(props);

this.state = {

  counter: 1

}

this.handleClick = this.handleClick.bind(this);

}

handleClick() {

this.setState({

  counter: this.state.counter + 1 

  // change code here

});

}

render() {

const expression = Math.random() >= 0.5 ? true : false // change code here

return (

  <div>

    <button onClick={this.handleClick}>Play Again</button>

    { /* change code below this line */ }

    <Results fiftyFifty = {expression} />

    { /* change code above this line */ }

    <p>{'Turn: ' + this.state.counter}</p>

  </div>

);

}

};