I want to convert this class based to functional based component in order to learn them
componentWillMount()
{
if(localStorage.getItem('IsLogin') === '1')
{
this.setState({isLogin:true});
}
}
setAuth = (userObject) =>
{
this.setState({isLogin:true});
localStorage.setItem('IsLogin',1);
localStorage.setItem('user',JSON.stringify(userObject));
}
setDestroyAuth = () =>
{
this.setState({isLogin:false});
localStorage.removeItem("IsLogin");
localStorage.removeItem("user");
}
CodePudding user response:
You can try this way and convert your class-based component into a functional base component. You can use React Hooks
for state management in functional component
. hooks-intro
Example :
import React, { useEffect, useState } from "react";
const App = (props) => {
const [state, setState] = useState({ isLogin: false });
useEffect(() => {
if (localStorage.getItem("IsLogin") === "1") {
setState({ ...state, isLogin: true });
}
}, []);
const setAuth = (userObject) => {
setState({ ...state, isLogin: true });
localStorage.setItem("IsLogin", 1);
localStorage.setItem("user", JSON.stringify(userObject));
};
const setDestroyAuth = () => {
this.setState({ ...state, isLogin: false });
localStorage.removeItem("IsLogin");
localStorage.removeItem("user");
};
return (
<div className="row">
Auth status : {state.isLogin}
<div>
<button onClick={setAuth}>Set Auth</button>
<button onClick={setDestroyAuth}>Destroy Auth</button>
</div>
</div>
);
};
export default App;
CodePudding user response:
Try this way:)
const [isLogin, setIsLogin] = React.useState(false) // declare it as bool instead object
React.useEffect(() => {
if(localStorage.getItem('IsLogin') === '1')
{
setIsLogin(true)
}
}, [])
setAuth = (user) => {
setIsLogin(true)
localStorage.setItem('IsLogin',1);
localStorage.setItem('user',JSON.stringify(user))
}
setDestroyAuth = () => {
setIsLogin(false)
localStorage.removeItem("IsLogin");
localStorage.removeItem("user");
}