React:Context is undefined

1

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

Movie
Movie2124×2832 1.18 MB

Movies.js

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">
      {movies.map((movie) => (
        <MovieItem key={movie.id} movie={movie}></MovieItem>
      ))}
    </div>
  );
};

export default Movies;

movieContext.js

import { createContext } from "react";

const movieContext = createContext();

export default movieContext;
2

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}
</MovieContext.Provider>