If you haven’t read part one to this tutorial/documentation guide, you can check that out here! _State in React is an incredibly powerful feature of class-based components and is somewhat similar to props with a few…_medium.com The Road to React Mastery — Understanding State 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. 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 scoreboard that doesn’t change, that’s not helpful at all! 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 </p>;<button>Team One + 2</button><button>Team Two + 2</button> {this.state.scoreTwo} ); }} Great, now we have two buttons. Do they do anything? But they , and that’s what we’ll focus on implementing next. Not yet! will 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 </p>;<button onClick={this.teamOneScores}>Team One + 2</button><button onClick={this.teamTwoScores}>Team Two + 2</button>);}} {this.state.scoreTwo} 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 to the function, otherwise when calling or null would be returned. This is done in the contructor. this this.props this.state is called when a user clicks the button (pretty self-explanatory), and we pass it the appropriate function for its appropiate team, and . onClick teamOneScores() teamTwoScores() Now, all that’s left to do, is to change each team’s score. To change the state of a component, you call , and that’s exactly what we’ll do to finish off our scoreboard! this.setState 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() {t } his.setState(state => ({         scoreOne: state.scoreOne +  2       })); teamTwoScores() {t } his.setState(state => ({         scoreTwo: state.scoreTwo +  2       })); render() {return(<h1>{this.props.teams[0]} vs {this.props.teams[1]}</h1>;<p>{this.state.scoreOne} vs </p>;<button onClick={this.teamOneScores}>Team One + 2</button><button onClick={this.teamTwoScores}>Team Two + 2</button>);}} {this.state.scoreTwo} 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 scoreboard. Now the Hawks and Eagles can finally get back to playing! useful 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!

Super

Too Long; Didn't Read

Get free API security automated scan in minutes

The Road to React Mastery — Handling Events

Too Long; Didn't Read

Company Mentioned

@ethoshansen

RELATED STORIES