My component can't read property in first render but in the second render my property , it will already have

Question

This is my error TypeError: Cannot read property 'email' of null

This is my provider component

import React, { useState } from 'react'
import { whatchUserChanges } from '../services'

export const AuthContext = React.createContext()
export default function AuthContextProvider(props) {
    const [state, setState] = useState({
        isLoggedIn: false,
        user: null,
        authReady:false
    })

    useState(() => {
        whatchUserChanges((user) => {
            if (user) {
                setState({
                    isLoggedIn: true,
                    user: user,
                    authReady:true
                })
            } else {
                setState({
                    isLoggedIn: false,
                    user: null,
                    authReady:true
                })
            }
        })
    }, [])

    return (
        <AuthContext.Provider value={state}>
            {props.children}
        </AuthContext.Provider>
    )
}

This my component that i want render my property email

import React, { useContext } from "react"
import { AuthContext } from "../../context/auth"


export default function Dashboard() {
  const contextAuth = useContext(AuthContext)
  console.log(contextAuth.user.email)
    return (
      <div className="Dashboard">El email es {contextAuth.user.email}</div>
    )
}

when i delete this part

{contextAuth.user.email}

I saw in the first render is working and contextAuth.user.emai is a null but in second render in console contextAuth.user.emai is not a null.

This is my repository:https://github.com/RotomFormProgramador/learnfirebase

How i solved this problem?

Answer 1

Handle the case where the user is null

export default function Dashboard() {
  const contextAuth = useContext(AuthContext)
  const user = contextAuth.user || {};
    return (
      <div className="Dashboard">El email es {contextAuth.user.email}</div>
    )
}

---

or show a different message if user is not logged in

export default function Dashboard() {
  const {user, isLoggedIn} = useContext(AuthContext)

  if (isLoggedIn){
    return (
      <div className="Dashboard">El email es {user.email}</div>
     );
  } 

  return (<div>User is not logged in</div>);
}