React, not able to consume value inside context, getting Uncaught TypeError: Cannot read properties of undefined

My Home page isn’t rendering anything. I’ve checked Home.js and I can’t find what could be the issue. In the console this is the error I get:

Home.js:13 Uncaught TypeError: Cannot read properties of undefined (reading 'name')

App.js:

import React, { useState } from 'react'
import Navigation from './Navigation'
import ThemeContext from './ThemeContext'
import UserContext from './UserContext'
import Home from './Home'

function App() {
  let [theme, setTheme] = useState({
    variant: 'dark',
    toggleTheme: toggleTheme
  })

  let [user, setUser] = useState({
    name: "Alyssa"
  })

  function toggleTheme() {
    setTheme(theme => (
      {
        ...theme,
        variant: theme.variant === 'dark' ? 'light' : 'dark',
      }
    ))
  }

return (
  <>
  <ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider>
  
  </>
)
}
export default App

Home.js:

import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Alert from 'react-bootstrap/Alert'
import UserContext from './UserContext'
import { useContext } from 'react'

function Home() {
  let user = useContext(UserContext)

  return (
    <>
    <UserContext.Consumer>
      <Alert variant="success">Welcome back, {user.name}!</Alert>
      <Card className="text-center col-md-10 mx-auto my-3">
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>This is Our Featured Item</Card.Title>
          <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card.Text>
          <Button variant="primary">Click Here</Button>
        </Card.Body>
      </Card>
    </UserContext.Consumer>
    </>
  )
}

export default Home

>Solution :

You are not passing the user to be consumed by a child component. You need to wrap the Home page with the UserContext.Provider and pass the user that you’d like to provide. Also, you can remove the UserContext.Consumer tag in the Home page since you are using the Hooks approach for consuming from a context.

import React, { useState } from 'react'
import Navigation from './Navigation'
import ThemeContext from './ThemeContext'
import UserContext from './UserContext'
import Home from './Home'

function App() {
  let [theme, setTheme] = useState({
    variant: 'dark',
    toggleTheme: toggleTheme
  })

  let [user, setUser] = useState({
    name: "Alyssa"
  })

  function toggleTheme() {
    setTheme(theme => (
      {
        ...theme,
        variant: theme.variant === 'dark' ? 'light' : 'dark',
      }
    ))
  }

return (
  <>
  <ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <UserContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider>
  </UserContext.Provider>
  </>
)
}
export default App

Home

import Card from 'react-bootstrap/Card'
import Button from 'react-bootstrap/Button'
import Alert from 'react-bootstrap/Alert'
import UserContext from './UserContext'
import { useContext } from 'react'

function Home() {
  let user = useContext(UserContext)

  return (
    <>
      <Alert variant="success">Welcome back, {user.name}!</Alert>
      <Card className="text-center col-md-10 mx-auto my-3">
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>This is Our Featured Item</Card.Title>
          <Card.Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Card.Text>
          <Button variant="primary">Click Here</Button>
        </Card.Body>
      </Card>
    </>
  )
}

export default Home