React Class Component with Examples

React class component is a class that extends React.Component class. This allows our component to override the methods from the parent class. One of the parent methods is render() which we need to override to render our elements to the UI.

A class component is stateful and can have a constructor and state.

Constructor is a special kind of function that is called when a component is initialized. We define a constructor by writing constructor().

As a rule of inheritance, you need to call the parent constructor by writing super() in the child constructor.

Constructor is used to set the state of the class. A state is an object that holds properties of the class.

Example

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>This is a book</h1>
    }
}
ReactDOM.render(<Book/>, document.getElementById('root'));

React class component with state

State is used to maintain the data in a component. It is mutable in nature so each time its value changes, the component gets re-rendered.

In the example below, we are saving 2 state variables called author and year. They can be accessed via this.state.author and this.state.year respectively.

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            author: 'Michael Jordan',
            year: 2020
        }
    }

    render() {
        return <div>
            <h1>This is a book</h1>
            <h2>Author: {this.state.author}</h2>
            <h2>Year: {this.state.year}</h2>
        </div>
    }
}
ReactDOM.render(<Book/>, document.getElementById('root'));

Output

React class component with props

Props are used to pass data to a component. Props to components are like arguments to a function. They are written the same way as attributes to an HTML element.

this.props returns all the props to a component. In the example below, index and author are 2 props which are passed to the Book component (see ReactDOM.render()) and they are accessed via this.props.index and this.props.author in the render().

import React from 'react';
import ReactDOM from 'react-dom';

export default class Book extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            author: 'Michael Jordan',
            year: 2020
        }
    }

    render() {
        return <div>
            <h1>This is a book with index: {this.props.index}</h1>
            <h2>Author: {this.props.author}</h2>
        </div>
    }
}

ReactDOM.render(<div>
    <Book index={1} author={'Michael'}/>
    <Book index={2} author={'John'}/>
</div>, document.getElementById('root'));

Output

Hope this article clears some common confusion about props and state to novice coders. Watch this publication for even more interesting and interview related articles.