React - Render Conditionally from Props

i’m unable to assign N to the counter value in p element

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    {/* Change code below this line */}
    return(
      <h1>
            {this.props.fiftyFifty ? "You Win!" : "You Lose!"}
      </h1>
    )
    {/* Change code above this line */}
  }
}

class GameOfChance extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => {
      // Complete the return statement:
      
      return {
        counter: prevState + 1
      }
    });
  }
  render() {
    const expression = Math.random() >= 0.5; // Change this line
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {/* Change code below this line */}
        <Results fiftyFifty = {expression}/>
        {/* Change code above this line */}
        <p>Turn:  {N = 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/119.0.0.0 Safari/537.36

Challenge Information:

React - Render Conditionally from Props

1 Like

:balloon:Hello! Welcome to the forum!

Ok, so the majority of the code you submitted looks great. The h1 ternary statement is good. The expression in the render method also looks super as does the Results element.

Essentially, there are two issues that need updating.

  1. The p element content that follows the Results element needs to be reset to its default for this challenge as follows:

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

    Some how your p element has been amended as shown below (please note the text immediately preceding your p element).

  1. The second thing that needs to happen, is to update the return statement in the handleClick method so that the count increases when the Play Again button is clicked. To do that you need to increment the counter property of prevState (hint: using dot notation).

If you update those two things your code will pass.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

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