React context is returning undefined

Question

Not sure why this is happening, I have checked to make sure that the states value is not undefined which it isnt and i cant see where im going wrong.

My authContext.js file

const initialState = {
  isAuthorized: false,
}

export const authContext = React.createContext() 

export default function AuthContextComp(props) {
  const [state, dispatch] = useReducer(reducer,initialState)

  return (
    <authContext.Provider authState={state}>
      {props.children}
    </authContext.Provider>
  )
}

function reducer(state, action){
  switch (action.type) {
    case 'signIn':
      return true;
      break;
  
    default:
      return state;
  }
}

My app file

function MyApp({ Component, pageProps, appProps }) {

  return (
    <GlobalContextWrapper pageData={pageProps}>
      <AuthContextWrapper>
        <div style={{textAlign:'center',paddingTop: 200}}>
          <h2>Signed in</h2>
          <button>Log in or log out</button>
          <Component {...pageProps} />
          <Test/>
        </div>
      </AuthContextWrapper>
    </GlobalContextWrapper>
  );
}

export default MyApp;

The component im trying to use the context in

import React, {useContext} from 'react'
import {authContext} from '../global/authContext/AuthContext'

export default function Test() {
  const t = useContext(authContext)
  return (
    <div>
       This is the test component
    </div>
  )
}

Can you see anything wrong here? Im using next.js and i cant figure out why not

authContext.Provider does this need to be captialised? AuthContext.Provider — evolutionxbox
– evolutionxbox, Commented Feb 2, 2021 at 20:48
@PatrickRoberts is it a convention? React docs say "Note: Always start component names with a capital letter." — evolutionxbox
– evolutionxbox, Commented Feb 2, 2021 at 20:49
Correct @evolutionbox - I thought you could name it anything but apparently not! — testingtestinganyone
– testingtestinganyone, Commented Feb 2, 2021 at 20:54

testingtestinganyone · Accepted Answer · 2021-02-02 20:50:11Z

3

Issue was that when passing state into the provide the name should be value. Not sure why this would be the case

    <authContext.Provider  value={state}>
      {props.children}
    </authContext.Provider>

answered Feb 2, 2021 at 20:50

testingtestinganyone

4972 gold badges6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Roberts Over a year ago

Because that's what the documentation says to do

Artemis Prime Over a year ago

To elaborate slightly on @PatrickRoberts terse response, the Provider component is internally defined by React when you create the context. In that definition, it has a value prop that takes the type the Context holds. It's "just how it works" :)

Collectives™ on Stack Overflow

React context is returning undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related