Handling State and Class Components in React

Data changes- that’s one of the beautiful thing about web apps. Changing data and then presenting a visual representation of that change. React handles mutable, component-based data called state. Functional React components don’t handle state, so you’ll need to upgrade to React class components. This is what a React class component looks like:

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {message: 'Hello world!'};
  }
  render(){
    <h1>{this.state.message}</h1>
  }
}

Let’s break down what is going on here:

Notice how the class component uses the class structure and super keyword to initiate the component.

Let’s walk through a simple example in CodePen of creating a class component in React, declaring state, and updating state.

Start up a pen with React, ReactDOM, and Bootstrap styling in CodePen. If you don’t know how to set up React in CodePen, check out this story.

Also add Bootstrap 4 for styling.

We are going to build a simple counter where a user can increase or decrease the count using plus (+) and minus (-) buttons. Let’s lay out the structure of our app using a class component.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  };
  
  render(){
    return (
      <div className="container text-center class-width">
        <div className="card">
          <div className="card-block">
            <h1 className="card-title">{this.state.count}</h1>
            <div className="btn-group btn-group-lg" 
              role="group" aria-label="Basic example">
              <button type="button" 
                className="btn btn-secondary"> - </button>
              <button type="button" 
                className="btn btn-secondary"> + </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Add the following to your CSS file to help position the counter:

.class-width {
  max-width: 150px;
  margin-top: 100px;
}

Your CodePen should look like this:

https://codepen.io/trey-davis/pen/MEgXLz

We are using state to render the count, but there isn’t a way to update the count. React has built-in event listeners that will trigger functions when activated. Let’s use the ‘onClick’ event listener on our buttons to add and subtract the values to our counter, but first we need to declare the functions in our class constructor.

  constructor(props) {
    super(props);
    this.state = {count: 0};
    
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  };

Next let’s add the actually functions- you will declare these as functions in your App class:

  increment() {
    let count = this.state.count;
    count++;
    this.setState({count: count});
  }
  
  decrement() {
    let count = this.state.count;
    count--;
    this.setState({count: count});
  }

The setState function is the React method that actually updates the state data. When setState is called a re-render is pushed and the DOM is automatically updated.

Now that we have our functions put together, let’s add our ‘onClick’ event listener to our button components to trigger the increment and decrement functions.

<button type="button" className="btn btn-secondary"
   onClick={this.decrement}> - </button>
<button type="button" className="btn btn-secondary"
   onClick={this.increment}> + </button>

When you are done you JavaScript file should look like this:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
    
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  };
  
  increment() {
    let count = this.state.count
    count++;
    this.setState({count});
  }
  
  decrement() {
    let count = this.state.count
    count--;
    this.setState({count});
  }
  
  render(){
    return (
      <div className="container text-center class-width">
        <div className="card">
          <div className="card-block">
            <h1 className="card-title">{this.state.count}</h1>
            <div className="btn-group btn-group-lg" 
              role="group" aria-label="Basic example">
              <button type="button" className="btn btn-secondary"
                onClick={this.decrement}> - </button>
              <button type="button" className="btn btn-secondary"
                onClick={this.increment}> + </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

And now your counter should be fully functional- you can increase and decrease the count every time to click the plus (+) or minus (-) buttons.

Let’s take a quick walk through what is happening every time you click the increment button.

Now we’ve constructed a class component and manipulated component data. Next we’ll look at how we manage data in forms.