.Render Conditionally from Props

.Render Conditionally from Props
0

#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/


#2

Carefully review the instructions to determine the exact spelling of the strings the h1 element should display.

Hint: You are close, but remember that JavaScript is case-sensitive.


#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.


#5

Actually, I don’t know what I was thinking when I wrote that first reply. @EddieCornelious is correct about using this.props.fiftyFifty on that line. The reason you must use this.props, is because the prop fiftyFifty was passed to the Results component and since the Results component is a React Stateful Component (via the class extends React.Component), props passed to these kinds of components must reference this.props in front of the prop name.

Also, @EddieCornelious is also correct about not using this.expression, because you declared expression as a plain variable and did not put this in front of it, so when you pass expression as a value of the fiftyFifty prop, you should not put the this in front of it.


#6

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


#7

Yes, that part would be correct, but make sure you have also fixed the other part of the code where you wrote this.expression instead of expression.


#8

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