Class Components

I. Class Components

React Components can also be written using ES6 classes.

Class Components is different from Functional Components because they allow React Components to have life cycle methods and state.

Class components have two instance properties: this.state and this.props. They represent the component’s state and properties respectively.

We can convert a function component to a class component:

Create an ES6 class, with the same name, that extends React.Component
Add a render() method
Move the body of the function into the render() method
Replace props with this.props in the render() body
Delete the remaining empty function declaration

For example

We can convert this Functional component:

function App() {
    return (
        <div>
            <p>Code goes here</p>
        </div>
    )
}

to Class component

class App extends React.Component {
    render() {
        return (
            <div>
                <p>Code goes here</p>
            </div>
        )
    }
}

Both types of React Components can be used by writing their name within an HTML tag:

const element = <App />

II. Render()

Class components must have a function called render(). The render function returns the JSX of the component.

It’s similar to returning value of a Functional Component.

For example, the following Class Component will render <h1>Hello World!</h1>:

In index.html

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

In index.js

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

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

In App.js

class Welcome extends React.Component {
    render(){
        return <h1>Hello World!</h1>
    }
}

III. Adding Props to Class Components

We can also use Props in React Class Component through the this.props attribute.

This differs slightly from Functional Components where the properties were passed in as a variable.

class App extends React.Component {
    render() {
        return (
            <div>
                <p>{this.props.whatever}</p>
            </div>
        )
    }
}

is similar to

function App() {
    return (
        <div>
            <p>{props.whatever}</p>
        </div>
    )
}

We can supply property values the same way as attribute values:

<App whatever="Hello World!" />

Binding Event Handlers to Class Components

Event handlers can be defined as methods within a class Component.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state = {count: 0}
        //binding is necessary to make `this` point to the correct object
        this.clickHandler = this.clickHandler.bind(this)
    }

    // Event handler named clickHandler
    clickHandler(){
      // increments the count of the state
      this.setState((prevState,props) => {
        return {count: prevState.count + 1}
      })
    }

    render(){
        //renders a button that displays the state count to keep track how many times the button is pressed
        return <button onClick = {this.clickHandler}>{this.state.count}</button>
    }
}

ReactDOM.render(
  <Counter/>,
  document.getElementById("root")
)

Explanation The bind() method is used to bind the clickHandler() method’s this keyword to the component instance.

Without binding the function, the function will have its this keyword point to an incorrect object and the setState() method will not work correctly.

Binding example:

this.clickHandler = this.clickHandler.bind(this);