{} inside render before return REACT

so i must put curlies on a console.log inside the render but before the return? ( ***)
syntax is confusing me in react.

type or paste code here

  **Your code so far**
class Results extends React.Component {
constructor(props) {
  super(props);
}
render() {
        {console.log('fF:',this.props.fiftyFifty)} //********************************
  return (
    this.props.fiftyFifty ? <h1>You Win!</h1> : <h1>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(prevState => {
            console.log('count',prevState.counter)

    return (
      {counter: prevState.counter+1}
    )
  });
}
  render() {
  const expression = Math.random() >=0.5
  console.log(expression)
  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/96.0.4664.45 Safari/537.36

Challenge: Render Conditionally from Props

Link to the challenge:

For JSX, you put any values that need to be evaluated in curly brackets. You really shouldn’t be putting console logs in there anyway, there’s no reason for having them in the render method, but as you’ve done it in this case, the log function has to be evaluated to actually get it to run.

didn’t this need eveluating:

handleClick() {
  this.setState(prevState => {
            console.log('count',prevState.counter)

    return (

?
i see its in existing curlies but so was the other one?

No, everything bar the stuff you return from the render function is just plain JavaScript. It doesn’t work any differently, there aren’t any special rules.

The stuff you return from that function is JSX, and that has a different syntax, but that is only the stuff after the return in the render() function (and JSX is just JS as well, but uses a different syntax)

persist with me, i’m feeling dumb now…
the example from Results is in the render function ,
the one from handleClick is not…
so curlies are required for evaluation in the render func (Results) but not within the class but outside the render func (handleClick)?
(all being outside the return)

Yep so

class Component extends React.Component {
  // Everything here is just plain JS, nothing
  // At all different syntax-wise to any other JS
  state = {
    still: "just plain JS"
  };

  handleSomething() {
    // Still just plain JS
    console.log("do whatever you want");
    this.setState({ some: "state" });
  }

  render() {
    // Still just plain JS here, do anything 
    // you want...
    console.log("Hiya!");
    // ...until
    return (
      <EverythingHere>
        <Is>JSX</So>
        <Anything that="isn't" just="a string" />
        <OrAComponent />
        { youNeedToPut() }
      </InCurlyBrackets>
      { /* Like comments, for example */ }
    );
  }
}
1 Like

i may print this.
(i’ll put a credit, thanks)

1 Like

Don’t worry about about that, hope it’s sorta helpful :upside_down_face:

1 Like