How can I display stored user data in JSX?

Question

I created a form successfully to change user data but somehow I cannot display the already saved user data with the code below. How can I display the user data stored to create a nice profile view? Why is the below not working even though I used the same method for editing the form targeting the object {email} etc..?

I just noticed the empty user info updates in real-time when I fill out the change user info form but it does not stay in there after I update it or refresh. I want it to show the user data stored before the update before the user makes a change

        export function UserView() {
        const [username, setUsername] = useState('');
        const [password, setPassword] = useState('');
        const [birthday, setBirthday] = useState('');
        const [email, setEmail] = useState('');
    
        const [usernameErr, setUsernameErr] = useState('');
        const [passwordErr, setPasswordErr] = useState('');
        const [emailErr, setEmailErr] = useState('');
    
        const token = localStorage.getItem('token');
        const user = localStorage.getItem('user');
    
        const validate = () => {...
        };
    
    const getSiteUser = () => {
            axios
                .get(`https://...`, {
                    headers: { Authorization: `Bearer ${token}` }
                })
                .then((response) => {
                    setUsername(response.data.Username);
                    setUser(response.data)
                    setEmail(response.data.Email);
                    setBirthday(response.data.Birthday);
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error)
                });
        }
    
        useEffect(() => {
            getUser()
        }, [])
    
     return (
            <Fragment>
                <h4> Your profile: </h4>
                <Card text='dark' className="user-form">
                    <Card.Body>
                        <Card.Text>Username: {username}</Card.Text>
                        <Card.Text>Email: {email}</Card.Text>
                        <Card.Text>Birthday: {birthday}</Card.Text>
                        <Card.Text>Password: {password}</Card.Text>
    
                    </Card.Body>
                </Card>
      <h4> Edit your profile: </h4>
                <Form className="profile-form">
                    <Form.Group className="mb-3" controlId="username">
                        <Form.Label>Username</Form.Label>
                        <Form.Control
                            type="text"
                            onChange={(e) => setUsername(e.target.value)}
                            value={username}
                        />
                    </Form.Group>
                   </Form>
            </Fragment>
        )
      }

Answer 1

import { useState, Fragment, useEffect } from "react";
import Card from "react-bootstrap/Card";
import Form from "react-bootstrap/Form";
const axios = require("axios");

export default function App() {
  const [userDetails, setUserDetails] = useState(
    JSON.parse(localStorage.getItem("user")) || {
      username: "",
      password: "",
      birthday: "",
      email: ""
    }
  );

  const token = localStorage.getItem("token");

  function getSiteUser() {
    axios
      .get(`https://...`, {
        headers: { Authorization: `Bearer ${token}` }
      })
      .then((response) => {
        setUserDetails({
          username: response.data.Username,
          birthday: response.data.Birthday,
          email: response.data.Email
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  function handleUsernameChange({ target }) {
    const newUserDetails = { ...userDetails };
    newUserDetails.username = target.value;
    setUserDetails(newUserDetails);
  }

  useEffect(() => {
    getSiteUser();
  }, []);

  useEffect(() => {
    localStorage.setItem("user", JSON.stringify(userDetails));
  }, [userDetails]);

  return (
    <Fragment>
      <h4> Your profile: </h4>
      <Card text="dark" className="user-form">
        <Card.Body>
          <Card.Text>Username: {userDetails.username}</Card.Text>
          <Card.Text>Email: {userDetails.email}</Card.Text>
          <Card.Text>Birthday: {userDetails.birthday}</Card.Text>
          <Card.Text>Password: {userDetails.password}</Card.Text>
        </Card.Body>
      </Card>
      <h4> Edit your profile: </h4>
      <Form className="profile-form">
        <Form.Group className="mb-3" controlId="username">
          <Form.Label>Username</Form.Label>
          <Form.Control
            type="text"
            onChange={handleUsernameChange}
            value={userDetails.username}
          />
        </Form.Group>
      </Form>
    </Fragment>
  );
}

Im assuming this is what u wanted to do, the error you have calling the API can't be solved by us wihout further details.