React - Render Conditionally from Props

JavaScript
1

Tell us what’s happening:

kindly help on how to define “N”

Your code so far

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: ' + 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

2

Hello @gabdulazeez2 !

I found this article in the fCC News category that may be able to help you understand Render a bit more.

I hope it helps you move on.

1 Like
3

prevState is all of the state, if you log it out you can see it is an object. You have to access the counter property on it in your setState updater function.

4

Thanks, your recommendation was helpful

5

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