convert class based component to functional component

Question

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");
  }

Does this answer your question? [componentWillMount for react functional component?](https://stackoverflow.com/questions/62091146/componentwillmount-for-react-functional-component) — Phil, Oct 07 '21 at 06:13

score 1 · Answer 1 · answered Oct 07 '21 at 06:24

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;

if i want to pass state as props than how can i do that in functional component — deep shah, Oct 07 '21 at 06:37
You can do like `` and access into `app` component. `const App = (props) => { console.log(props) }` — Asif vora, Oct 07 '21 at 06:39

score 0 · Answer 2 · answered Oct 07 '21 at 07:28

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");
}

convert class based component to functional component

2 Answers2