score:1

Accepted answer
const Profile = () => {
  const history = useHistory();
  const [user, setUser] = useState(); // <-- undefined, falsey
  const [state, stateSetter] = useState('About'); // <-- use type

  useEffect(() => {
    async function fetchMyAPI() {
      try {
        let res = await api.get('user/isLoggedIn', { withCredentials: true });
        if (res.data.user) {
          setUser(res.data.user);
        }
      } catch(err) {
        history.push('/login');
      }
    }
    fetchMyAPI();
  }, []);

  const clickHandler = (e) => {
    e.preventDefault()
    const nav = document.querySelectorAll('.info_links');
    switch (e.target.textContent) {
      case 'About':
        nav[1].classList.remove('un-p');
        nav[2].classList.remove('un-p');
        stateSetter('About'); // <-- update state type
        break;
      case 'Stats':
        nav[0].classList.remove('un-p');
        nav[1].classList.remove('un-p');
        stateSetter('Stats'); // <-- update state type
        break;
      case 'Blogs':
        nav[0].classList.remove('un-p');
        nav[2].classList.remove('un-p');
        stateSetter('Blogs'); // <-- update state type
        break;
      default:
        console.log('error')
    }
    e.target.classList.add('un-p');
  }

  return (
    <>
      <Navbar />
      <div>
        <div
          className="CoverImage FlexEmbed FlexEmbed--2by1"
          style={{ backgroundImage: `url(${user.cover}})` }}>
        </div>
        <img className="avatar" src={`${user.dp}`} alt="Girl in a jacket" />
        <div className="info">
          <p className="info_links link-grow un un-p" onClick={clickHandler}>About</p>
          <p className="info_links un" onClick={clickHandler}>Blogs</p>
          <p className="info_links un" onClick={clickHandler}>Stats</p>
        </div>
        {state === 'About' && <About user={user} />}
        {state === 'Stats' && <Stats user={user} />}
        {state === 'Blogs' && <Blogs user={user} />}
      </div>
    </>
  );
}

Related Query

More Query from same tag