I have a case here, which is to make a remember me function when logging in.

So, yesterday I got an online repo on codesandbox which contains reactjs component remember me.

Then I want to convert it into react hooks.

The code is like this (React Component original)

import React from "react";

class RememberMe extends React.Component {
  static displayName = "RememberMe";

  state = {
    email: "",
    password: "",
    isChecked: false
  };

  componentDidMount() {
    if (localStorage.checkbox && localStorage.email !== "") {
      this.setState({
        isChecked: true,
        email: localStorage.username,
        password: localStorage.password
      });
    }
  }

  onChangeValue = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };

  onChangeCheckbox = (event) => {
    this.setState({
      isChecked: event.target.checked
    });
  };

  loginSubmit = () => {
    const { email, password, isChecked } = this.state;
    if (isChecked && email !== "") {
      localStorage.username = email;
      localStorage.password = password;
      localStorage.checkbox = isChecked;
    }
  };

  render() {
    const { email, password, isChecked } = this.state;
    return (
      <div>
        <form>
          <table align="center">
            <tr>
              <td>
                <label>Email</label>
              </td>
              <td>
                <input
                  type="email"
                  name="email"
                  value={email}
                  onChange={this.onChangeValue}
                />
              </td>
            </tr>
            <tr>
              <td>
                <label>Password</label>
              </td>
              <td>
                <input
                  type="password"
                  name="password"
                  value={password}
                  onChange={this.onChangeValue}
                />
              </td>
            </tr>
            <tr>
              <td colSpan="2">
                <input
                  type="checkbox"
                  checked={isChecked}
                  name="lsRememberMe"
                  onChange={this.onChangeCheckbox}
                />
                <label>Remember me</label>
              </td>
            </tr>
            <tr>
              <td colSpan="2">
                <input type="button" value="Login" onClick={this.loginSubmit} />
              </td>
            </tr>
          </table>
        </form>
      </div>
    );
  }
}

export default RememberMe;

However, when it was finished, I tried to convert it into hooks, but it didn’t work properly, I thought, "Is there something wrong in my code? Thank you

    import React, { useState, useEffect } from "react";
    
    const Me = () => {
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const [isChecked, setIsChecked] = useState(false);
    
      useEffect(() => {
        if (localStorage.checkbox && localStorage.email !== "") {
          setEmail({ email: localStorage.username });
          setPassword({ password: localStorage.password });
          setIsChecked({
            isChecked: true
          });
        }
      }, []);
    
      const onChangeValue = (event) => {
        setIsChecked({
          [event.target.name]: event.target.value
        });
      };
    
      const onChangeCheckbox = (event) => {
        setIsChecked({
          isChecked: event.target.checked
        });
      };
    
      const loginSubmit = () => {
        if (isChecked && email !== "") {
          localStorage.username = email;
          localStorage.password = password;
          localStorage.checkbox = isChecked;
        }
      };
    
      return (
        <div>
          <form>
            <table align="center">
              <tr>
                <td>
                  <label>Email</label>
                </td>
                <td>
                  <input
                    type="email"
                    name="email"
                    value={email}
                    onChange={onChangeValue}
                  />
                </td>
              </tr>
              <tr>
                <td>
                  <label>Password</label>
                </td>
                <td>
                  <input
                    type="password"
                    name="password"
                    value={password}
                    onChange={onChangeValue}
                  />
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input
                    type="checkbox"
                    checked={isChecked}
                    name="lsRememberMe"
                    onChange={onChangeCheckbox}
                  />
                  <label>Remember me</label>
                </td>
              </tr>
              <tr>
                <td colSpan="2">
                  <input type="button" value="Login" onClick={loginSubmit} />
                </td>
              </tr>
            </table>
          </form>
        </div>
      );
    };

export default Me;

https://codesandbox.io/s/remember-me-localstorage-forked-crpt1z

>Solution :

Look closely at the types of your state.

Unlike with a class component where there’s one state object with various keys, each state atom is now separate and should just hold the value itself, yet you’re setting objects into them, e.g.

setEmail({ email: localStorage.username });

Invocations like that should be just

setEmail(localStorage.username);

and so on.

You also don’t need useEffect(); just use useState‘s function initialization:

import React, { useState } from "react";

function Me() {
  // State, initial state loaded from local storage if set
  const [email, setEmail] = useState(() => (localStorage.checkbox ? localStorage.username : ""));
  const [password, setPassword] = useState(() => (localStorage.checkbox ? localStorage.password : ""));
  const [isChecked, setIsChecked] = useState(() => !!localStorage.checkbox);

  const loginSubmit = () => {
    if (isChecked && email !== "") {
      localStorage.username = email;
      localStorage.password = password;
      localStorage.checkbox = isChecked ? "1" : "";
      alert("Okay!");
    }
  };

  return (
    <div>
      <form>
        <table align="center">
          <tr>
            <td>
              <label>Email</label>
            </td>
            <td>
              <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </td>
          </tr>
          <tr>
            <td>
              <label>Password</label>
            </td>
            <td>
              <input type="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)} />
            </td>
          </tr>
          <tr>
            <td colSpan="2">
              <input
                type="checkbox"
                checked={isChecked}
                name="lsRememberMe"
                onChange={(e) => setIsChecked(e.target.checked)}
              />
              <label>Remember me</label>
            </td>
          </tr>
          <tr>
            <td colSpan="2">
              <input type="button" value="Login" onClick={loginSubmit} />
            </td>
          </tr>
        </table>
      </form>
    </div>
  );
}