Two useContexts in a file

Question

I want to use two useContexts' in the same file.

import React, { useContext, useState } from 'react'
import { SubscribeContext } from '../NavBar'
import { AppContext } from '../../../Home'
import './Subscribe.css'

export default function SubscribePopup() {
    const { setSubscribePop } = useContext(SubscribeContext);
    const { error, setError } = useContext(AppContext);
    const [text, setText] = useState("");
    return (
        <div>
        </div>
    )
}

SubscribeContext seems to be working fine. However useContext(AppContext) returned undefined

#AppContext File
import React, { createContext, useState } from 'react'
import Card from './components//Cards/Card'
import NavBar from './components/NavBar/NavBar'


export const AppContext = createContext();
export default function Home() {
    const [error, setError] = useState(false);
    return (
        <div>
            <AppContext.Provider value={{error, setError}}>

            </AppContext.Provider>
        </div>
    )
}

Whats wrong here?

Answer 1

Try creating an initial state for React Context because without an initial state react context returns undefined.

Initial Context

export const AppContext = createContext({ error: false })

Component

import React, { createContext, useState } from 'react'
import Card from './components//Cards/Card'
import NavBar from './components/NavBar/NavBar'

const state = {
  error: false
}

export const AppContext = createContext(state);
export default function Home() {
    const [error, setError] = useState(false);
    return (
        <div>
            <AppContext.Provider value={{error, setError}}>

            </AppContext.Provider>
        </div>
    )
}
export const AppContext = createContext({ error: false })