In offical react tutorial they first write class component:
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
and then make it a function component
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
Why is the onClick change necessary?
Thanks
In the function component, props are accessed through the parameter props directly (notice how it is passed in), as it's an object. In the class component, props exists on the class itself, and there is not variable named props.
props changed from being a property of the component object to being an argument passed to the function.
Function Component receives a prop as a function argument (function Sqaure(props)),
while in Class Components, props are passed (or constructed from the constructor via super(props)) and made available via this.props.
That change is not necessary but can be omitted in both cases.
You can write it in both examples like this:
onClick={() => this.props.onClick()}>
or like this which is better for performance, because it does not create a new function on every render:
onClick={this.props.onClick}>
The only difference is, where the function is coming from. In the first case it comes from the this.props since it a class component and the props are not passed directly into the render function. In the function component, the props are directly passed into the function and can be accessed by props.onClick.
