How to convert a function based component into a class based component in React.js?

How to use class based components in React.js? »

Now, you need to put all these knowledge together to convert the function based component App into a class based component. Modify the code in index.js so that it looks like:

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

class App extends React.Component {
    render(){
       const getHours = () => {
           const currentHours = new Date().getHours();
           return currentHours;
       }

       const getTime = () => {
           setTimeout(() => {
               const hours = getHours().toString(); console.log(hours);
               return hours;
           },
           3000);
       }

       return <div>Current hour is: </div>
    }

}

ReactDOM.render(
 <App />,
 document.querySelector('#root')  
);

In the above code, you’ve converted the functional component into a class based one. The line Class App extends React.Component means that you’re borrowing some methods / functions from React.Component to be used inside the App component. For example, the render() method. These are the methods that are already defined inside React.Component class.

Leave a Comment