Convert Class Component to Function(Arrow) Component – React


How to convert Class Component to Functional(Arrow) component in React

We can convert a class component to an arrow functional component in React. Let’s look at an example and understand how to do it. Here is a sample Class component in React.

Example 1

The following code is written in a JSX File.

// Class component
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello World!'
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

To convert this class component to an arrow functional component, we can follow these steps:

  1. First, we remove the constructor method and the super call, as they are not needed in functional components.
  2. Next, we replace the render method with a function that returns JSX.
  3. Lastly, we remove the this keyword when accessing the state object.

Here is the updated arrow functional component:

// Arrow functional component
import React, { useState } from 'react';

const MyComponent = () => {
  const [message, setMessage] = useState('Hello World!');

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
};

In this example, we used the useState hook to manage the component’s state instead of a class component’s state object. By doing this, we no longer need to access the state using this keyword. Instead, we can destructure the state variable and the setState function from the useState hook.

Example 2

Here’s another example that demonstrates these concepts. The following code is written in a JSX File.

// Class component
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    );
  }
}

To convert this class component to an arrow functional component, we need to perform the following steps:

  1. Removing the constructor method and the super call: In class components, the constructor method is used to initialize the component’s state and bind methods to this keyword. In functional components, we can use hooks like useState to initialize state, and arrow functions to avoid the need to bind methods to this keyword.
  2. Replacing the render method: In class components, the render method is used to define what the component should render. In functional components, we simply need to define a function that returns JSX. We can give this function any name we like, but many developers use the name MyComponent to match the class component name.
  3. Removing the this keyword: In class components, we need to use the this keyword to access the component’s state, props, and methods. In functional components, we can simply use the variable name or destructured variable names directly. For example, instead of using this.props to access props, we can use just props.

Here is the updated arrow functional component:

// Arrow functional component
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
};

In this example, we’ve converted a class component that uses this.state and a constructor method to an arrow functional component that uses the useState hook to manage state and a simple arrow function to handle the onClick event. Note that we no longer need to use this keyword to access state or the event handler.

I hope you found this article helpful.

Convert Class Component to Function(Arrow) Component - React

Cheers!

Happy Coding.

About the Author

This article was authored by Rawnak.