How to convert functional component to class component in ReactJS ?
Last Updated :
30 Oct, 2023
ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state in a different way.
Prerequisites
Approach to convert functional components to class components in React JS
To convert a function component to a class component we need to make the following major changes.
- Change the function to a class
- Add the render method
- Convert all functions to a method
- Add Constructor
- Replace hooks with lifecycle methods
Creating React Application
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure
It will look like the following.
Example: This is a simple React app using Functional Component.
JavaScript
// Filename - App.js
import React, { useState } from "react";
function App(props) {
const [counter, setCounter] = useState(0);
const myFunction = (e) => {
setCounter(counter + 1);
};
return (
<div
style={{ textAlign: "center", margin: "auto" }}
>
<h1 style={{ color: "green" }}>
GeeksForGeeks
</h1>
<h3>This is example of functional component</h3>
<p>Hello, {props.name}</p>
<p>Counter: {counter}</p>
<button onClick={myFunction}>Add 1!</button>
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example: This example involves the use of Class Component for same applicationÂ
JavaScript
import React, { useState } from "react";
class App extends React.Component {
// Add constructor
constructor(props) {
super(props);
this.state = {
counter: 0,
};
this.myFunction = this.myFunction.bind(this);
}
// Define methods
myFunction(e) {
this.setState({ counter: this.state.counter + 1 });
}
// Use render method
render() {
return (
<div
style={{
textAlign: "center",
margin: "auto",
}}
>
<h1 style={{ color: "green" }}>
GeeksForGeeks
</h1>
<h3>This is example of class component</h3>
<p>Hello From GFG</p>
<p>Counter: {this.state.counter}</p>
<button onClick={this.myFunction}>
Click me!
</button>
</div>
);
}
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Similar Reads
How to create a Functional Component in React? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
Migrating from Class Components to Functional Components in React React version 16.8.0 or higher allows users to write the functional components without the use of class components. Using class components, we need to write the whole class to interact with the state and lifecycle of the component. The code was quite complex and harder to understand which led to low
4 min read
How to create Functional Components in React ? To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
When to use a Class Component over a Function Component in ReactJS? ReactJS provides two main ways to create components: Class Components and Function Components. With the introduction of React Hooks in version 16.8, Function Components became more powerful and are now commonly preferred. However, there are still scenarios where Class Components might be a better ch
3 min read
How to Call Parent Components's Function from Child Component in React ? In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi
3 min read
How to Pass Data from One Component to Another Component in ReactJS? In ReactJS, components are the building blocks of your user interface. Components allow you to create modular, reusable UI elements, but sometimes these components need to communicate with each other.In this article, we will explore the different methods to pass data between components in ReactJS.1.
5 min read