If you haven’t read part one to this tutorial/documentation guide, you can check that out here!
The Road to React Mastery — Understanding State_State in React is an incredibly powerful feature of class-based components and is somewhat similar to props with a few…_medium.com
Or, if you have a firm grasp of React state, then feel free to follow along from here.
Where we left off
Last time, we had a scoreboard that held two static team scores stored in a Scoreboard component’s state. A scoreboard that doesn’t change, that’s not helpful at all! Yes, I completely agree, so in this guide, I’ll walk you through creating a useful and dynamic scoreboard, by using event handlers and by mutating state.
A quick to-do list:
We need to:
- Add buttons to the Scoreboard component.
- Write a function that increases the team’s score by two.
- Call the function when the button is pressed.
So to begin, let’s look at the code we already have:
class ScoreBoard extends React.Component {constructor(props) {super(props);this.state = {scoreOne: 0,scoreTwo: 0};}
render() {return(<h1>{this.props.teams[0]} vs {this.props.teams[1]}</h1>;<p>{this.state.scoreOne} vs {this.state.scoreTwo}</p>;);}}
ReactDOM.render(<ScoreBoard teams=["Hawks", "Eagles"]/>,document.getElementById('root'));
Adding buttons
To give our scoreboard functionality, we need to add buttons that will eventually increase the scores of both teams. Let’s start by creating two, external components.
class ScoreBoard extends React.Component {constructor(props) {super(props);this.state = {scoreOne: 0,scoreTwo: 0};}
render() {return(<h1>{this.props.teams[0]} vs {this.props.teams[1]}</h1>;<p>{this.state.scoreOne} vs {this.state.scoreTwo}</p>;<button>Team One + 2</button><button>Team Two + 2</button>
);
}}
Great, now we have two buttons. Do they do anything? Not yet! But they will, and that’s what we’ll focus on implementing next.
class ScoreBoard extends React.Component {constructor(props) {super(props);this.state = {scoreOne: 0,scoreTwo: 0};this.teamOneScores = this.teamOneScores.bind(this);this.teamTwoScores = this.teamTwoScores.bind(this);}
teamOneScores() {//Increase team one's score by two}
teamTwoScores() {//Increase team two's score by two}
render() {return(<h1>{this.props.teams[0]} vs {this.props.teams[1]}</h1>;<p>{this.state.scoreOne} vs {this.state.scoreTwo}</p>;<button onClick={this.teamOneScores}>Team One + 2</button><button onClick={this.teamTwoScores}>Team Two + 2</button>);}}
We took a few steps in that snippet of code, so I’ll walk you through them. By default, React doesn’t bind a function to the class it is being called in, thus we have to bind the component’s this to the function, otherwise when calling this.props or this.state null would be returned. This is done in the contructor.
onClick is called when a user clicks the button (pretty self-explanatory), and we pass it the appropriate function for its appropiate team, teamOneScores() and teamTwoScores().
Now, all that’s left to do, is to change each team’s score. To change the state of a component, you call this.setState, and that’s exactly what we’ll do to finish off our scoreboard!
class ScoreBoard extends React.Component {constructor(props) {super(props);this.state = {scoreOne: 0,scoreTwo: 0};this.teamOneScores = this.teamOneScores.bind(this);this.teamTwoScores = this.teamTwoScores.bind(this);}
teamOneScores() {this.setState(state => ({ scoreOne: state.scoreOne + 2 }));}
teamTwoScores() {this.setState(state => ({ scoreTwo: state.scoreTwo + 2 }));}
render() {return(<h1>{this.props.teams[0]} vs {this.props.teams[1]}</h1>;<p>{this.state.scoreOne} vs {this.state.scoreTwo}</p>;<button onClick={this.teamOneScores}>Team One + 2</button><button onClick={this.teamTwoScores}>Team Two + 2</button>);}}
There we go! Every time a button is pressed, the appropriate score is referenced and then increased by two, then saved into state. We now have a dynamic, functional and useful scoreboard. Now the Hawks and Eagles can finally get back to playing!
- There are far more efficient ways of completing this, however, this seemed to be the simplest, for use as an introduction into event handlers in React. If you’d like to see other ways, using custom arguments in event handlers, let me know!
Thank’s for reading! Stay tuned for more React goodness!
I’m a 17 year old software developer, if you liked this little mini-series, please follow me to keep updated on what I’m doing next!