REACT -- Convert a Class Component to Functional Component with Hooks Guide w/ES6
Tags: hooks, react, javascript, class
Published: 2022-03-07 18:54:58

---
title: REACT -- Convert a Class Component to Functional Component with Hooks Guide w/ES6
published: true
description: Conversion of Class Components into Functional Components with React
tags: hooks, react, JavaScript, class
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtlez6exxw1sa2z7jsci.jpg
---
[Demo](https://gregpetropoulos.github.io/ClassToFunc/)
[repo](https://github.com/GregPetropoulos/ClassToFunc)

In React, the class components and lifecycle methods have changed quite a bit in the last few years. Often times a developer may be handling legacy code and the newer paradigm of functional components and hooks. In this article I will use a basic example of converting a class component into a functional component with the hooks. [Repo](https://github.com/GregPetropoulos/ClassToFunc)


### The Rules Functional && Class Components
- props are read-only, the same props must return the same result. Components that respect their props are called “pure”.
- Do not mutate the state directly



 
### The Functional vs Class:
#### Functional Component
-  Takes advantage of functional programming
-  A function with a traditional return statement
-  Functional Components can be stateless
-  Commonly use the useState hook that updates (overwrites) the state.
- UseEffect takes place of the lifecycle methods


#### Class Component
 -  Takes advantage of object oriented programming 
 -  Creates objects via constructor function, a built in JavaScript class method
 -  The 'class', 'constructor', 'super', 'this' and 'new' keyword are needed
 -  JSX is returned in the render statement
 -  The render lifecycle must be managed explicitly
 -  Use the setState and will merge the state
 -  Method Binding


 
#### App.css
```
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: rgba(125, 137, 238, 0.877);
  color: whitesmoke;
  line-height: 1.6;
}

ul {
  list-style: none;
}
h1, h2 {
  text-align: center;
}
.container {
  max-width: 768px;
  margin: auto;
  padding: 0 20px;
}

```
#### App.js
```javascript
import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
    </div>
  );
};

export default App;
```


 
### Class Component
Cats.js
```javascript
import React from 'react';

class Cats extends React.Component {
  render() {
    return(
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h1>Hello Cats</h1>
</>
)
  }
}
export default Cats;
```
-----------

### Functional Component w/ES6
Dogs.js
```javascript
import React from 'react';

const Dogs = () => {

  return (
<>
<h1 style={{ color: 'red' }}>A Functional Component</h1>
<h1>Hello Dogs</h1>
</>
)
};

export default Dogs;
```
#### Simple demo rendering a class and functional component 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw52eu5ctigylwfpvlzv.png)


## A Class Component with State, Props, and Lifecycle Method

Cats.js
```javascript
import React from 'react';
import Kittens from './Kittens';


class Cats extends React.Component {
  constructor() {
    super();
    this.state = { color: 'yellow', name: 'Tartar', kittens:3 };
  }
  componentDidMount() {
alert('This componentDidMount to the DOM')
  }
  changeColor = () => {
    this.setState({color: "red"});
  }
  render() {
    return (
      <div>
        <h1 style={{ color: 'blue' }}>A Class Component</h1>
        <h2>Hello Cats</h2>
        <h2>
          Hello Cats. My name is {this.state.name} and I am the color {this.state.color}.
        </h2>
        <Kittens kittens={this.state.kittens}/>

        <button type='button' onClick={this.changeColor}>
          Class Change color
        </button>
      </div>
    );
  }
}
export default Cats;

```

### The (Kittens.js) Child Class Component

Kittens.js
```javascript
import React from 'react'

class Kittens extends React.Component{


render() {
    return 
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h2>Tartar has {this.props.kittens} kittens</h2>
</>
}
}
export default Kittens;

```

## Let's Change the Class Component Cats.js to A Functional Component
#### I am creating new component called 'ChangeCat.js'

###### Side Note: 
 The child component called `Kittens.js` remained a class but still reads the props from `ChangeCat.js` we could go further and change the `Kittens.js` to functional component which would be consistent with the paradigm.</font>


App.js 
```javascript
import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';
import ChangeCat from './ChangeCat';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
      <ChangeCat />
    </div>
  );
};

export default App;
```

ChangeCat.js
```javascript
import React, { useEffect, useState } from 'react';
import Kittens from './Kittens';
const ChangeCat = () => {
  const [catInfo, setCatInfo] = useState({
    name: 'Tartar',
    color: 'Yellow',
    kittens: 3
  });

  useEffect(() => {
    alert(
      "This was the componentDidMount in Cats.js but now it's coming from the ChangeCat.js useEffect to the DOM"
    );
  }, []);

  const handleClick = (e) => setCatInfo({ ...catInfo, color: e.target.value });

  return (
    <>
      <h1 style={{ color: 'red' }}>A Functional Component</h1>

      <h2>
        Hello Cats. My name is {catInfo.name} and I am the color {catInfo.color}
        .
      </h2>
      <Kittens kittens={catInfo.kittens} />
      <button type='button' value='red' onClick={handleClick}>
        Functional Change Color
      </button>
    </>
  );
};

export default ChangeCat;
```

 ![Result of Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtaw847zx2ukc236orau.png)
 

## Summary
Legacy code is challenging. 
- This demo compared `Dogs.js` (functional) and `Cats.js` (Class) components both can be used in React.
- I created a class component with more complexity to include state, passing props to a child class component, and a lifecycle method.
- I changed the `Cats.js` class component to a functional component called `ChangeCat.js`
- Final Result is a functional component `ChangeCat.js` with a class component child.



Give it a try and convert the rest of the class components to functional components [Repo](https://github.com/GregPetropoulos/ClassToFunc)


## Links :link:
[React Docs](https://reactjs.org/docs/components-and-props.html)
[Demo](https://gregpetropoulos.github.io/ClassToFunc/)

:heart::heart::heart:

## Social 
[Twitter](https://twitter.com/GregoriosPetro1)
[Linkedin](https://www.linkedin.com/in/greg-petropoulos/)
[Portfolio](https://gregpetropoulos.dev/)
[Github](https://github.com/GregPetropoulos)

:metal:
Happy Coding