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

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

CodePudding user response：

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

CodePudding user response：

You need to pass in and then you can access it using props.name in Home.js file also pass props in Home.js function.

CodePudding user response：

It's because this line let user = useContext(UserContext) is storing undefined inside user, which is normal because you didn't wrap Home inside UserContext.Provider and gave user inside App as value.

Change the return inside App to this:

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

And you could simplify your return inside Home to this:

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>
    </>
  )

CodePudding user response：

You didnt wrap app component with UserContext.Provider so there is no value for user object. Try this

<UserContext.Provider value={user}>
<ThemeContext.Provider value={theme}>
    <Navigation />
  </ThemeContext.Provider>
  <ThemeContext.Provider value={theme}>
    <Home />
  </ThemeContext.Provider
</UserContext.Provider>

And use optional chaning or and operator to access user object to prevent errors when user is null or undefined

{user && user.name }

{user?.name}