Render Conditionally from Props Exercise - Bug?

JavaScript
1

Tell us what’s happening:
My code seems to be functioning properly in the exercise, but I’m unable to clear the page.

Did I mess up something easy here…

Your code so far


class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
      {
        this.props.fiftyFifty==true ? <p>You win!</p> : <p>You lose!</p>
      }
      </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); 
    //let fiftyFifty;
    // 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>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

2 
this.props.fiftyFifty==true ? <p>You win!</p> : <p>You lose!</p>

Change above line to:

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

Putting p in h1 is doable, but not a good practice [StackOverflow].

Your code should violate test case #6 rather than #5 and #7. I don’t know why the test result is deceiving.

As a side note, you don’t have to do this:

this.props.fiftyFifty==true // evaluates to boolean

while you can do just this:

this.props.fiftyFifty // evaluates to boolean
1 Like
3 
let expression = (Math.random()>.5);

The main problem is in the code above! how it become “fiftyFifty” if there is no limit on the random number to be generated and it was only compared to .5! This is a main Hint!!! :slight_smile:

4

What are you talking about?

Random generates numbers between 0 and 1. Half of them are greater than 0.5. So, it is like throwing a coin, which is 50: 50 (fifty fifty). I wouldn’t choose that name, but the name is good enough.

5

But that’s the thing! I believe you should consider floating points here although you are generating random numbers between 0-1 did you consider its limits?, the test won’t pass because of that, I just modified this line and ABRACADABRA it’s magic! can’t post my solution but only this line is the one I modified and it works!

Question? Is 1+4 === 5 in Javascript? try to make a logical comparison that returns a boolean you’ll
understand what I mean here.

Free Code Camp problem is so subtle and so literal

, hope you get another hint :-).

6 
let expression = (Math.random()>.5);

Changing this line has no effect on passing the challenge.

Please elaborate more on your concept of limit.

7

With Math.random() you are generating number that have floating-points you are not limiting it to a whole number which is asked by the Test and .5 is also not a whole number… gt is a logical operator which returns a boolean ,check the problem browser display window upon clicking the button the result does not change means the boolean is stuck into one constant value, constant because it doesn’t change due to comparison error.

Limit the number in terms of converting it to a whole number and compare it to a whole number too. this is what I mean.

BTW - I don’t use the<p> tags in my solution in the ternary operator because as I mentioned before FreeCodeCamp problems are so subtle and they mention in the problem that it should display only in <h1> not in a <p> inside an <h1> :slight_smile:

Hope you solve the problem now.

8 
let expression = (Math.random()>.5);

You don’t need a whole number comparison to get this working. The given code above returns true or false at 50% chance (disregarding psuedo-randomness of random generator)

Consider a real number line ranging from 0 to 1. The midpoint is 0.5. Any real number between 0 to 0.5 occupies half of the space and 0.5 to 1 is another half. This is what is meant by fifty-fifty. So, the problem is never that part of the code. On every click, that expression will run yielding either true or false at 50% chance.

This question has already been solved and you can see what exactly went wrong in the previous post.
Btw, I’m not trying to solve this challenge because I’ve already done it while answering OP’s question.

9

Subtlety is the point here and floating point ramifications, whether you believe it or not.

This challenge shows the difference between mathematics and programming where the numbers you
imagine same are not the same when compared thru logical comparisons in a programming language.

as I mentioned before does 1+4===5 in Javascript?

There is no bug with this Challenge.

Thanks.

10

It is sort of fun trying to figure out what you are saying.

1 + 4 === 5 yields true. Now, I’ve answered it, what are you trying to prove? There is no difference between math and programming in this expression, Math.random() > .5, except Random is not truly random and binary floating point representation is imperfect.

11

Same from my end, its fun explaining this.

You take it too literal, correct TRUE!.

Have you consider coercion on other representation of it?

Thanks for your answer :slight_smile: