HomeProfile.js

import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import userApi from "../../apis/user.api";
import catchErrors from "../../context/catchError";

const INIT_USER = {
  id: localStorage.getItem("user"),
  email: "",
  img: "",
};

const HomeProfile = () => {
  const [user, setUser] = useState(INIT_USER);

  async function getSetUser(userID) {
    try {
      const data = await userApi.getUser(userID);
      setUser(data);
    } catch (error) {
      // catchErrors(error, setError)
    }
  }

  useEffect(() => {
    getSetUser(user.id);
  }, []);

  return (
    <Link to={`/profile/${user.id}`} className="text-decoration-none text-dark">
      <form className="flex-column align-items-center justify-content-center m-2">
        <div className="d-flex justify-content-center">
          <img
            alt="homeProfileImg"
            src={`/uploads/${user.img}`}
            className="rounded-circle"
            style={{
              width: "157px",
              height: "157px",
            }}
            // value={user.img}
          />
        </div>
        <h1 className="d-flex justify-content-center"> {user.email} </h1>
        <h2 className="d-flex justify-content-center"> #{user.id} </h2>
      </form>
      <div
        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
      />
    </Link>
  );
};

export default HomeProfile;