Context returning undefined - useContext

Question

I'm trying to set up useContext in the simplest way possible, but it keeps returning undefined.

I've checked it several times but still can't decipher what I'm missing.

Context.js:

import React from 'react';

export const Context = React.createContext();

export function Provider(props) {

    const sayHi = () => {
        console.log('hi')
    }

    const value = {
        actions: {
            sayHi
        }
    }

    return(
        <Context.Provider value={value}>
            {props.children}
        </Context.Provider>
    );
}

Consumer component (Transfer.js):

import React, { useContext } from 'react';
import { Context } from '../Context';

function Transfer() {
    const value = useContext(Context);
    console.log(value); // ------> returns undefined
    console.log(Context); // ----> it is defined

    return (
        <div className="send">
            // some HTML
        </div>
    );
}


export default Transfer;

Folder structure:

src
└───components
│   └─── Transfer.js
│  
└───App.js
└───App.scss
└───Context.js
    ...

Have you added 'Provider' to your App.js (or some root component) — Sumith, May 14 '21 at 12:36

score 3 · Answer 1 · answered May 14 '21 at 12:46

3

Answer: Missing Provider on root component

answered May 14 '21 at 12:46

dNyrM

545
1
4
17

score 2 · Accepted Answer · answered May 14 '21 at 13:05

Hi @cdgmachado : The issue is due to an empty value when you're creating context value instead use this :
export const Context = React.createContext(null) This where i've read about it . https://kentcdodds.com/blog/how-to-use-react-context-effectively . You can look my codesandbox also : https://codesandbox.io/s/goofy-bash-z1cnq?file=/src/Context.js:28-76

From the blog : This a capture of the part talking about :

Hope that it'll solve it

Context returning undefined - useContext

2 Answers2