reactjs - useContext return undefine

Question

hi guys I'm struggling with usecontext return undefine issue please help i tried every single solution on stack but nothing works please need help

here is my code

watchlist context file

import React, { createContext } from "react";
import Moviedata from "../utility/movieData";

export const WatchlistContext = createContext();

function WatchlistProvider({ children }) {
  const [Watch, setWatch] = React.useState(Moviedata);

return (
    <WatchlistContext.Provider value={{ Watch }}>
        {children}
    </WatchlistContext.Provider>
);
}

export default WatchlistProvider;

index.js file

import MoviesProvider from "./context/Movies";
import WatchlistProvider from "./context/Watchlists";

ReactDOM.render(
  <MoviesProvider>
    <WatchlistProvider>
        <ThemeProvider theme={theme}>
            <App />
        </ThemeProvider>
    </WatchlistProvider>
</MoviesProvider>,
document.getElementById("root"));

Watchlist.js file

import { WatchlistContext } from "../context/Watchlists";
function Watchlist() {
const classes = useStyle();
const { Watch } = useContext(WatchlistContext);
console.log(Watch);
return (
    <div>
        <HomeNavbar
            search={
                <div className={classes.search}>
                    <div className={classes.searchIcon}>
                        <SearchIcon />
                    </div>
                    <InputBase
                        placeholder="Search…"
                        classes={{
                            root: classes.inputRoot,
                            input: classes.inputInput,
                        }}
                        inputProps={{ "aria-label": "search" }}
                    />
                </div>
            }
        />
    </div>
)}

 
export default Watchlist;

[][1][1]: https://i.stack.imgur.com/ZbDib.png

question from:https://stackoverflow.com/questions/65945384/usecontext-return-undefine

Answer 1

Try in your contex file give the contex an initial value when you create it , I’m pretty sure that should solve the problem.