React; Render Conditionally from Props

JavaScript
1

Hello,

What wrong in my code ? Nothing display. :thinking:

class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    {/* Change code below this line */}
    {this.props.expression >= 0.5 ? <h1>You Win!</h1> : <h1>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({
      counter: this.state.counter + 1 // change code here
    });
  }
  render() {
    const expression = Math.random() // 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>
    );
  }
}
2

First off, please make sure and include a link to the challenge. The Get Help -> Ask for Help button will automate that for you. For others, it is here.

When I run your code and look at the FCC console, I see this:

Build error, open your browser console to learn more.

Did you see that? Open up your browser console. There will be a link there that takes you to the page that explains what the error is, in general terms. From that you should be able to figure out what the specific problem is.

If you run into trouble, check back.

3 
{return this.props.expression >= 0.5 ? <h1>You Win!</h1> : <h1>You Win!</h1>}

But the result is " You lose!" all the time :thinking:

4

OK, that is a different question.

Put this:

    console.log(this.props)

on the first line of your render method of Results and see if you can see the issue.

5

@karlito By the way, these are very basic trouble shooting skills - checking the browser console for errors and logging out data to understand the problem. Those should be your first stop if you’re having a problem, fundamental skills for any developer.

A good developer is a good debugger. And a good debugger is a good detective.

1 Like
6

image

it didn’t change :thinking:

7

ooooooooooooooooooo sorry just a min

1 Like
8

Part of being a developer is paying very close attention to details.

This is the kind of error that developers make all the time. The point is to get good at spotting it.

9

That’s works, GGGRRRRRRrrr!
It’s really desapointing React and it’s took a lot of time to learn it. I think I need some holidays :grin:

10

this is the good code

{return this.props.fiftyFifty >= 0.5 ? <h1>You Win!</h1> : <h1>You Lose!</h1>};
11

Yeah, React is very weird at first. But once you get the hang of it, it is veeeery powerful. And cool.

But these debugging skills are super important to whatever you do. You should do those things first, before asking for help.

1 Like
12

Thank you Kevin, see you… :wink:

1 Like
13

I added [spoiler][/spoiler] tags to your answer since it is the key part of a working solution.

14

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