React: Mistake in Tutorial Instructions

[MincePie]

I'm a struggling learner - I've been trying to learn for 4.5 years and still really confused about everything. I haven't found a good way to learn yet, so apologies in advance if this sort of thing is in that category of super obvious to the audience you're aiming to reach with the tutorial.

I'm trying to follow along with the tutorial - about half way down the page it says:

Now we're passing down two props from Board to Square: value and onClick. The latter is a function that Square can call. So let's do that by changing render in Square to have:

<button className="square" onClick={() => this.props.onClick()}>
  {this.props.value}
</button>

I think there is a mistake in the instructions. It says 'render', but there is no render in the Square class. There is return. The final result you share shows this button in the 'return'. Maybe the instructions should replace 'render' with 'return'.

Thanks

[karlpokus]

Hi @MincePie

I do believe there's a render fn in Square. Take a look at the starter example on codepen Line 2.

[Boshen]

It's not immediately obvious, but if you code along with the tutorial, at this point your Square class changes from:

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

  render() {
    <button className="square" onClick={() => this.setState({value: 'X'})}>
      {this.state.value}
    </button>
  }
}

to

class Square extends React.Component {
  render() {
    <button className="square" onClick={() => this.props.onClick()}>
      {this.props.value}
    </button>
  }
}

Then some time later in Functional Components, the Class becomes a function:

function Square(props) {
  return (
    <button className="square" onClick={() => props.onClick()}>
      {props.value}
    </button>
  )
}

[gaearon]

@brigand and I rewrote some parts of the tutorial in https://github.com/facebook/react/issues/9454, and following along should be easier now. Let us know if you're still struggling! We’re happy to look at remaining issues in case we missed anything.

https://facebook.github.io/react/tutorial/tutorial.html

[MincePie]

Thanks a lot Dan. I'll try again later this week. I'm almost finished the
udemy introduction - so hopefully it will be smoother for me this time
around

On Tue, May 2, 2017 at 2:39 AM, Dan Abramov [e-mail]
wrote:

Closed #9120 https://github.com/facebook/react/issues/9120.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/9120#event-1064171183, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AJn_D1kq9S6T3JPNDXg1sLPnmGuAFA2gks5r1gq3gaJpZM4MTvwP
.

[gaearon]

Sounds great, please do let us know whether it helps!