Yogesh Chauhan's Blog

How to convert a function component into a class in React?

in React on April 26, 2021

As we have already seen in the React Basics, components are small chunk of code like functions. They are reusable and helps to manage the UI easily.

We saw earlier in this Components and Props in React post that you can declare the components in two different ways.

When your app is small and it doesn’t require updating the UI, you’d want to go with a function component but as it grows bigger and require some UI modification, you’d want to go for a class component.

I am not saying that you can’t update the UI with a function component but with a function component, you need to render the element again and again to update the UI, which is not the way React suggests to update the UI. React suggests using states to update the UI and with a class component you can do that.

Let’s take a look at the function component first.



function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}


Let’s convert the above function component into a class component.

Step 1: Create an ES6 class.

You can use the same name for the class since in actual app/program, you might have used at multiple places. The class will extend React.Component to have all component’s properties and methods.



class Clock extends React.Component {
  ...
}


Step 2: Add a single method render() and keep it empty.



class Clock extends React.Component {
  render(){
    ...
  }
}



Step 3: Move the same body code inside the render() method.



class Clock extends React.Component {
  render(){
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}


Step 4: Replace the props with this.props.



class Clock extends React.Component {
  render(){
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}


That’s it. The Clock component is a class component now rather than a function component.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Debugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHow to vertically and horizontally align text and image block (without flex or grid) in CSS?CSSHow to disable right click and drag and drop of images using jQuery?jQueryAll possible ways you can Insert Data in PostgresPostgresHow to get query string values in JavaScript? (URL Manipulation using URLSearchParams)JavaScriptWhat are keys in React?React