Having trouble passing user._id down

[shuzel99]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

on log in, users have an email, password, and id. When I go to the /profile route it says it cant read ._id even though it's passed down as a prop.

Post any code you think might be relevant (one fenced block per file)

`const App = () => {
  const [profile, setProfile] = useState([])
  const [chat, setChat] = useState([])
  const [user, setUser] = useState(null)
  const [msgAlerts, setMsgAlerts] = useState([])
  const [currentProfile, setCurrentProfile] = useState(null)

  console.log('message alerts', msgAlerts)

  const clearUser = () => {
    console.log('clear user ran')
    setUser(null)
  }

    const deleteAlert = (id) => {
        setMsgAlerts((prevState) => {
            return (prevState.filter((msg) => msg.id !== id) )
        })
    }

    const msgAlert = ({ heading, message, variant }) => {
        const id = uuid()
        setMsgAlerts(() => {
            return (
                [{ heading, message, variant, id }]
      )
        })
    }
    //GET USER PROF FROM DB
    const getProfile = () => {
        if (user != null) {
            fetch(apiUrl + `/profiles/${user._id}`)
            .then(profile => {
                console.log('api res', profile)
                profile.json()
            })
            .then(profile =>{
                setCurrentProfile(profile[0])
                return 'complete'
            })
            .catch(error => console.log(error))
        }
    }

    const getChats = () => {
        if (user != null) {
            fetch(apiUrl + '/chats/user', {
                headers : {
                    'Authorization': 'Bearer' + user.token
                }
            })
            .then(chats => {
                return chats.json()
            })
            .then(chats => {
                setChat(chats)
            })
            .catch(error => console.log(error))
        }
    }

    //runs functions when user logs in
    useEffect(()=> {
        getProfile()
        getChats()
    }, [user])

        return (
            <Fragment>
                <Header user={user} />
                <Routes>
                    <Route path='/' element={<Home msgAlert={msgAlert} user={user} />} />
                    <Route
                        path='/sign-up'
                        element={<SignUp msgAlert={msgAlert} setUser={setUser} />}
                    />
                    <Route
                        path='/sign-in'
                        element={<SignIn msgAlert={msgAlert} setUser={setUser} />}
                    />
          <Route
            path='/sign-out'
            element={
              <RequireAuth user={user}>
                <SignOut msgAlert={msgAlert} clearUser={clearUser} user={user} />
              </RequireAuth>
            }
          />
          <Route
            path='/change-password'
            element={
              <RequireAuth user={user}>
                <ChangePassword msgAlert={msgAlert} user={user} />
              </RequireAuth>}
          />
          <Route
            path='/profile'
            element= {< Profile user={user} currentProfile={currentProfile} setCurrentProfile={setCurrentProfile} getProfile={getProfile} />}
            />
                </Routes>
                {msgAlerts.map((msgAlert) => (
                    <AutoDismissAlert
                        key={msgAlert.id}
                        heading={msgAlert.heading}
                        variant={msgAlert.variant}
                        message={msgAlert.message}
                        id={msgAlert.id}
                        deleteAlert={deleteAlert}
                    />
                ))}
            </Fragment>
        )
}

export default App
`

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

In the backend I see this "BSONTypeError: Argument passed in must be a string of 12 bytes or a string of 24 hex characters" and the ._id is "61de89692e9a6af8ade3bf6f". In the frontend I see "unable to read ._id"

What is your best guess as to the source of the problem?

The app is bad luck.

What things have you already tried to solve the problem?

I've tried console logging at different points in promises in app.js and on login ._id is grabbed just fine. When I try to hit the profile route is when things get weird

[timmshinbone]

so, try to console log the user(props.user) in the profile component and share what the console log says

[shuzel99]

Console.log from the profile component coming back null and I dont know why. I'm going to consolidate profile & users on the backend, have users fill out profile info on sign up so there's no prop to pass

[TaylorDarneille]

What's the update on this?

[shuzel99]

resolved. I went back and did some postman investigating