Beginner with Conversion of code(from function to class) in react js - reactjs

Question

import React, { useEffect, useState } from "react";
import { toast } from "react-toastify";
const Dashboard = ({ setAuth }) => {
const [name, setName] = useState("");
const [role, setRole] = useState("");
const getProfile = async () => {
try {
const res = await fetch("http://localhost:5000/dashboard/", {
method: "POST",
headers: { jwt_token: localStorage.token }
});
const parseData = await res.json();
console.log(parseData)
setRole(parseData.user_role);
setName(parseData.user_name);
} catch (err) {
console.error(err.message);
}
};
const logout = async e => {
e.preventDefault();
try {
localStorage.removeItem("token");
setAuth(false);
toast.success("Logout successfully");
} catch (err) {
console.error(err.message);
}
useEffect(() => {
getProfile();
}, []);
return (
<div>
<h1 className="mt-5">Dashboard</h1>
<h2>Welcome {name} as {role}</h2>
<button onClick={e => logout(e)} className="btn btn-primary">
Logout
</button>
</div>
);
};
export default Dashboard;
Hi all,
Please help...
I am trying to develop an app with a simple login registration .
I have a code in function component for login registration which I have posted above .
My entire codes of the app are in class based(class components). Could you please help me to convert the above code into
class based.

Answer 1

You can convert your function component to a class in five steps:
Create an ES6 class, with the same name, that extends React.Component.
Add a class constructor that assigns the initial this.state (to add your initial state of name and role ).
use this.setState to update your state ( name or role).
Add a single empty method to it called render().
Move the body of "return" inside the function component into the render() method.
Replace props with this.props in the render() body.
you can't use react Hooks (useEffect, useState ) inside you class component , so you will need to use ComponentDidMount or ComponentDidUpdate ...(depending in the situation ), in your case you will need to use ComponentDidMount because you fetching data (call getProfile inside ComponentDidMount).
you need to take a look in the references below to understand more about it and why you will need to use componentDidMount:
https://reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class
https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/