React Class Components – The Components with State

React Class Components were introduced with the arrival of ES6. It was at that time that the concept of classes became a part of Javascript itself.

A large portion of the current React code running in the industry uses React Class Components. This is because originally only class components had state. Functional Components in React could not have their own state.

However, this has changed after the introduction of React Hooks. With hooks, even functional components have access to state. Nevertheless, class components still have a large footprint in the existing code and will continue to do so for a significant amount of time.

1 – What are React Class Components?

Basically, class components in React are ES6 classes. They have constructors, life-cycle methods, render function and of course, state management.

A class component can also receive props from the parent component if needed. It can also have its own state or data. It should also have a render method that should return a valid JSX or null.

Below is an example of a typical class component.

import React from 'react';

class MyClassComponent extends React.Component {
    render() {
        return (
            <div>
                Hello From my First Class Component
            </div>
        )
    }
}
export default MyClassComponent;

This is a very simple class component. It just has a render() method that returns a valid JSX. In this case, that means a simple div with some Hello message.

The above class component can now be called in any other component like a simple HTML tag. See below example.

import React from 'react';
import MyClassComponent from './MyClassComponent';

function App() {
  return (
    <MyClassComponent />
  );
}

export default App;

Notice the import statement where we import the component. And then, we simply use it just like a normal HTML tag.

2 – Passing Props in a Class Component

The above example is not a terribly useful component. Usually, a component will be receiving some props from the parent and then doing something based on those props.

So how do we handle props in a React Class Component?

See below:

import React from 'react';

class MyClassComponent extends React.Component {
    render() {
        const {msg} = this.props;
        return (
            <div>
                {msg}
            </div>
        )
    }
}
export default MyClassComponent;

We receive props and we use object destructuring to extract the msg property. Then, we simply use the msg property in curly braces inside our JSX.

If you are wondering how we actually pass the msg, this is how it appears in the parent component.

function App() {
  return (
    <MyClassComponent msg="Welcome to my first class component using props" />
  );
}

Basically, here the parent component or App Component is telling the child what message to display.

3 – Managing State in a Class Component

Handling props are fine but those are not the real goals of using class components. The main reason class components became the bread-and-butter of React developers is because of their state management capability.

import React from 'react';

class MyClassComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            message: '',
        };

        this.onChange = this.onChange.bind(this);
    }

    onChange(event) {
        this.setState({ message: event.target.value });
    }

    render() {
        return (
            <div>
                <h1>React Class Component with State Demo</h1>
                <input 
                    value = {this.state.message}
                    type = "text"
                    onChange = {this.onChange}
                />
                <p>{this.state.message}</p>
            </div>
        )
    }
}

export default MyClassComponent;

Here, we have also used the constructor. The constructor basically sets up the initial state and also bind methods. For example, in this case, we bind the onChange function with the scope of this class inside the constructor.

In the onChange function, we simply update the state using the setState() method. The onChange itself is triggered each time there is a change in the value of the input field we have defined.

We can include this component within a parent component in the same way as before. Of course, our latest version of the class component does not even need the prop. Therefore, the parent need not pass the prop. Even if it passes the prop while calling the child component, the prop value will be ignored.

---

Basically, React Class Components form the core of the React. They are extremely popular even today despite the introduction of more capabilities to functional components.

In this post, we have looked at the high-level basics. In a future post, we will also be looking at life-cycle method in a class component.