Components are the heart of React, allowing us to split our UI into smaller, reusable pieces. Keeping focused components makes separation of concerns easier than ever. Before the introduction of Hooks in React 16.8, the only way to use state in a component was to make it a Class Component.
In order to create a class component, we first need to import React into the file: import React from 'react'; . From there we need to name our class and give it access to React Component's functions.
class OurCounter extends React.Component
We define a render() function inside of the class component to tell React what should be returned when the component is added to the DOM.
The most basic set-up of a class component in react looks like this:
import OurCounter extends React.Component {
render() {
return <h1> Hello World! </h1>
}
}
But! Class Components allow us to use state, so we can maintain and update information within the component.
We need to write a constructor function within our class to give it its initial state. To create a simple counter, we'd write a constructor that looks like this:
constructor {
super(); // super() allows us to use 'this' inside the constructor -- we're using inheritance with the 'extends' keyword
this.state = {
count: 0
}
}
The value of this refers to an instance of our class. So, we're telling React "This instance of our class should have a property called state, with a value of { count: 0 }." With an initial state, we can render {this.state.count} to our page and it will show up as 0, or whatever else we might have set the initial value to inside of the constructor.
Great! We've got state in our class component, but how do we update it?
Under our constructor (but outside render() - a very goofy mistake I made in my final project assessment), we need to write a function to increment the value of our counter.
counterPlus = () => {
this.setState({
count: this.state.count + 1
})
}
Writing counterPlus as an arrow function binds the value of this to be an instance of OurCounter.
Now we want to put our function to use and see the magic of React in our browser! Inside of our class' render function, we're going to display a button with an event listener that will call our function on each click and increment the value of its state's count.
render() {
return <button onClick={this.counterPlus}> {this.state.count} </button>
}
What we've written inside of the render function gives us a button, when we click that button the counterPlus function is invoked. When that function is invoked, it updates this instance of OurCounter's state. All put together, our class component should look like this:
import React from 'react';
class OurCounter extends React.Component {
constructor() {
super();
this.state = {
count: 0
}
}
counterPlus = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return <button onClick={this.counterPlus}> {this.state.count} </button>
}
}
export default OurCounter; //so we can use the increment button anywhere in our React application, as long as we import it
Oldest comments (2)
Hey Ronnie! Super solid post on state in class components. I tutor a few bootcamp students who would definitely benefit from this post! I have a couple points of feedback if you're interested in any ✌️
Why would anyone use a class component over a function component + React hooks?