-
Overview
4 Lecutre- What Is React?
- Inspecting the Starter Code
-
Passing Data Through Props
-
Making an Interactive Component
-
Completing the Game
3 Lecutre-
Lifting State Up
-
Why Immutability Is Important
- Function Components
-
-
Adding Time Travel
3 Lecutre-
Storing a History of Moves
-
Lifting State Up, Again
-
Showing the Past Moves
-
Function Components
We’ll now change the Square to be a function component.
In React, function components are a simpler way to write components that only contain a render
method and don’t have their own state. Instead of defining a class which extends React.Component
, we can write a function that takes props
as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.
Replace the Square class with this function:
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
We have changed this.props
to props
both times it appears.
View the full code at this point
Note
When we modified the Square to be a function component, we also changed
onClick={() => this.props.onClick()}
to a shorteronClick={props.onClick}
(note the lack of parentheses on both sides).