useContext returning udefined

Question

I'm new to React and I'm trying to use Context API. Here is my code:

FormColorContext.js

import React, { useState } from 'react';
export const FormColorContext = React.createContext();
const FormColorProvider = (props) => {
 const [color, setColor] = useState('white')
 
 return (
 <FormColorContext.Provider value={{color}}>
 {props.children}
 </FormColorContext.Provider>
 )
}
export default FormColorProvider

dashboard.js

import React from 'react';
import FormColorProvider from '../context/FormColorContext';
import DefaultLayout from '../layout/default-layout';
import EmptyDashboardComponent from '../components/Dashboard/EmptyDashboardComponent';
import NewFormComponent from '../components/Dashboard/NewFormComponent';
import ColorSelectorComponent from '../components/Dashboard/ColorSelectorComponent';
import styles from '../styles/dashboard.module.css';
export default function Dashboard() {
 return (
 <div>
 <DefaultLayout>
 <div className={styles.containerMain}>
 <h1 className={styles.headingCenter}>Create a new form</h1>
 <FormColorProvider>
 <ColorSelectorComponent/>
 <NewFormComponent/>
 </FormColorProvider>
 </div>
 </DefaultLayout>
 </div>
 )
}

NewFormComponent.js

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import FormColorContext from '../../context/FormColorContext';
export default function NewFormComponent() {
 const color = useContext(FormColorContext);
 console.log(color);
 return (
 <div className={styles.formContainer}>
 </div>
 )
}

I made sure that all imports are correct, but for some reason when I try to log color variable I'm getting undefined. What am I doing wrong? Thanks in advance. Renato

• Taghi Khavari: what is you're project folder structure?
• Renato Maretić: my project structure: ibb.co/jztdHqV

Answer 1

Sample Example: Expo Snack

In your Context Provider you are passing an object, so access color like below:

NewFormComponent.js:

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import {FormColorContext} from '../../context/FormColorContext';
export default function NewFormComponent() {
 const {color} = useContext(FormColorContext);
 console.log(color);
 return (
 <div className={styles.formContainer}>
 </div>
 )
}

FormColorContext.js:

import React, { useState } from 'react';
export const FormColorContext = React.createContext();
export const FormColorProvider = (props) => {
 const [color, setColor] = useState('white')
 
 return (
 <FormColorContext.Provider value={{color}}>
 {props.children}
 </FormColorContext.Provider>
 )
}

** dashboard.js: **

import React from 'react';
import {FormColorProvider} from '../context/FormColorContext';
import DefaultLayout from '../layout/default-layout';
import EmptyDashboardComponent from '../components/Dashboard/EmptyDashboardComponent';
import NewFormComponent from '../components/Dashboard/NewFormComponent';
import ColorSelectorComponent from '../components/Dashboard/ColorSelectorComponent';
import styles from '../styles/dashboard.module.css';
export default function Dashboard() {
 return (
 <div>
 <DefaultLayout>
 <div className={styles.containerMain}>
 <h1 className={styles.headingCenter}>Create a new form</h1>
 <FormColorProvider>
 <ColorSelectorComponent/>
 <NewFormComponent/>
 </FormColorProvider>
 </div>
 </DefaultLayout>
 </div>
 )
}

• Taghi Khavari: he's getting undefined as useContext value!
• Renato Maretić: after adding { color } I'm getting TypeError: Cannot destructure property 'color' of 'Object(...)(...)' as it is undefined.
• Renato Maretić: I made it work, error was combination of missing { color } and missing { } on import because it wasn't default export. Thank you for your help.

Answer 2

The problem is in imports. You import the default value in NewFormComponent.js file. Change the import to import {FormColorContext} from '../../context/FormColorContext';

Moreover, it is a dupliate of useContext() returns undefined you could have googled it)

• Renato Maretić: I made it work, error was combination of missing { color } and missing { } on import because it wasn't default export. Thank you for your help.
• Metamodern: You are welcome) But you don't actually need to destructure context as { color }. You may write colorContext = useContext(someContext) and access color later in your code by writing colorContext.color.

Answer 3

You have a problem in importing the FormColorContext in your NewFormComponent and it's passing the undefined to useContext method and it returns undefined too.

here is what you need to do:

import React, { useContext } from 'react';
import styles from '../../styles/NewFormComponent.module.css';
import FormColorContext from '../context/FormColorContext';
export default function NewFormComponent() {
 // remember to destructure the color variable
 const { color } = useContext(FormColorContext);
 console.log(color);
 return (
 <div className={styles.formContainer}>
 </div>
 )
}