Database returns object but it is not displaying in JSON within my state correctly

Question

Hello I'm very new to react and javascript in general. I was modifying an authentication function to load user data from the DB. The token comes in just fine and gets stored but when I look into the redux dev tools the user data displays as so.

user(pin):"{"name":"John Doe","last_login":null,"is_superuser":false,"email":"johndoe3@gmail.com","is_active":true,"is_staff":false,"user_type":6,"groups":[],"user_permissions":[]}"

How can I get the the labels to not be displayed as strings so that it can be referenced from the state correctly.

Below is the function in question any help would be very appreciated.

export function receiveToken(payload) {
  return (dispatch) => {
    const user = payload.user;
    const token = payload.token;

    delete user.id;
    localStorage.setItem("token", token);
    localStorage.setItem("user", JSON.stringify(user));
    axios.defaults.headers.common["Authorization"] = `Token ${token}`;
    dispatch(receiveLogin());
  };
}

Thank you!

Answer 1

there was no real issue since I was able to use

const user = JSON.parse(localStorage.getItem("user") || {});

to get the user related data. my issue now is that it returns an error

VM3886:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse ()

after reloading the app with everything wiped fresh