React:Context is undefined

I am getting an error in one of my components (Movies.js) - “Context is undefined”, i am pretty sure i imported context correctly.


import React, { useContext } from "react";
import MovieItem from "./MovieItem";
import MovieContext from "../context/movie/movieContext";

const Movies = () => {
  const movieContext = useContext(MovieContext);

  const { movies } = movieContext;

  return (
    <div className="grid grid-cols-4">
      { => (
        <MovieItem key={} movie={movie}></MovieItem>

export default Movies;


import { createContext } from "react";

const movieContext = createContext();

export default movieContext;

You haven’t created a context provider (a component) for whatever state you want to store to live in – createContext sets it up for you, but you actually need the component, eg:

<MovieContext.Provider value={/* object you want to store */}>
  {components that need to access context go here}