React useContext() not reading context values in?

Question

This is what my code looks like:

Context.js:

const Context = createContext();
export default Context;

ContextProvider.js:

import Context from './Context';
const ContextProvider = () =>
{
   ....
   return(<Context.Provider value={data: 1}>{props.children}</Context.Provider>
}

ParentClass.js:

const ParentClass = () => 
{
   ...
   return(
      <div>
       ...
      {boolValue ? (
      <ContextProvider>
         <ConsumerComponent/>
      </ContextProvider>) 
      </div>)
}

ConsumerComponent.js:

import Context from './Context.js';
const ConsumerComponent = () => {
   const contextData = useContext(Context);
   ...
}

My issue is that ConsumerComponent doesn't seem to be able to access context data; it doesn't render at all when I add the const contextData = useContext(Context); line, and nothing gets logged when I try to print contextData. Where exactly did I go wrong? From my understanding, I followed the necessary steps of creating context + a provider, making sure that the consuming component has a provider as one of its ancestor components, and then accessing the context with useContext().

boolValue ? won't really do much. That's one half of a ternary operator. What's meant to happen if boolValue is false? — Andy
– Andy, Commented Mar 16, 2022 at 21:50

Gustavo Galupo · Accepted Answer · 2022-03-17 03:55:36Z

1

Considering you want the value prop of the Context Provider to be an object like

{ data : 1 }

you probably forgot the extra curly braces, because the first pair is the JSX syntax to interpret the content as JavaScript instead of a string.

So your value prop on ContextProvider.js file probably should look like this:

<Context.Provider value={{data: 1}}>{props.children}</Context.Provider>

answered Mar 17, 2022 at 3:55

Gustavo Galupo

1364 bronze badges

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

Collectives™ on Stack Overflow

React useContext() not reading context values in?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related