Converting React Components From Function To Class

1

Hello everyone , so after installing create-react -app , i got my components as function , how do i get them as a class without going through the Hook stuffs conversion , is there some configuration i should do or should i install an older version ?? please help

2

Hello there,

I am not too sure what you mean…

This is a class component:

class myComponent extends React.Component {
  render() {
    <div></div>
  }
}

This is a functional component:

const myComponent = () => {
  return (
    <div></div>
  );
}

There is not much difference, and you can use either interchangeably. I often have both used within the same project.

A newer version of create-react-app would use functional components, because that is the direction React is going; the recommended use of React is with functional components. However, there is no need to use them, and both still work in the latest version.

Hope this helps

3

i converted the function to class ,

Annotation 2020-07-09 014017
Annotation 2020-07-09 0140171257×672 96.8 KB

There seem to be a problem from the packages after adding the class extends , it worked earlier with function

Annotation 2020-07-09 014136
Annotation 2020-07-09 0141361253×588 85.1 KB

4

and yes i have the latest version of react-app which came with function instead of class components , the problem is working with event handlers and states using functions which is a bit complex am only new to react

5

HI @poulmwangi, I m not a pro in React with classes but I think state is not an array instead its an object.

so on line 20,21,22 this.state[0].name is not gonna work and that’s why you are getting that undefined error.

It should be -> this.state.person[0].name

Hope this helps,
Regards,
Abhishek

6

oooh right , i had forgoten about that , working fine now Thanks you

7

np.
Happy Coding.

Regards,
Abhishek