React: Render Conditionally from Props -- Help Needed

1

Here is what I have:

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: 1
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      counter: this.state.counter + 1 // change code here
    });
    
  }
  render() {
    let expression = Math.random > .5;
    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>
    );
  }
};

Everything passes except the last requirement: 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! .

When you click the “Play Again” button, it seems like there is not a new random number generated.

Is the component not rendered again (and so generating a different random number) whenever the button is clicked?

1 Like
2

random is a method and you have to execute if you want it to return a random number → Math.random()

3

what you pointed out is a bug indeed but it will not fix the problem either. I had the same problem here that the component will not be rendered again after pressing the button

4

Experiment the same error does not mean the source is the same ^^ (btw with the op code the problem is that the expression evaluate always to false, not a render issue ^^ )

Executing the random method is enough to let the OP code pass all the tests, if your code cannot pass the challenge please post it so we can help with it ( the link to the challenge is welcome too :stuck_out_tongue: )