By Sara


2019-12-02 21:56:01 8 Comments

I am following a tutorial on Youtube https://www.youtube.com/watch?v=35lXWvCuM8o

At 17:45s it doesn't import MovieProvider from "./MovieContext" but it does when you see the tutorial and I have done everything exactly the same, what could be the reason ?

import React from "react";
import "./App.css";
import MoviesList from "./MoviesList";
import { Movi } from "./Movie";
import { MovieProvider } from "./MovieProvider";

function App() {
  return (
    <MovieProvider>
      <div className="app">
        <MoviesList />
      </div>
    </MovieProvider>
  );
} 

 export default App;

import React, { useState, useContext } from "react";
import Movie from "./Movie";
import { MovieContext } from "./Movie";
const MoviesList = () => {
  const value = useContext(MovieContext);
  return (
    <div>
      <h2>{value}</h2>
      {/*movies.map(movie => (
        <Movie name={movie.name} price={movie.price} />
      ))*/}
    </div>
  );
};

export default MoviesList;

import React from "react";
import "./App.css";

const Movie = ({ name, price }) => {
  return (
    <div className="movie">
      <h2>{name}</h2>
      <p>{price}</p>
    </div>
  );
};

export default Movie;

import React, { useState, createContext } from "react";

export const MovieContext = createContext();

export const MovieProvider = props => {
  const [movies, setMovies] = useState([
    { name: "Brave heart", price: "10$" },
    { name: "Mission impossible", price: "20$" },
    { name: "Titatic", price: "5$" }
  ]);

  return (
    <MovieContext.Provider value={"Hello"}>
      {props.children}}
    </MovieContext.Provider>
  );
};

PS: I have followed other tutorial where Context API works with classes in same file, It just does not work for me in this Youtube video.

Br Sara

3 comments

@Sara 2019-12-09 15:07:39

I have found that name of my file was MovieProvider that's why it was showing MovieProvider in the options, when I saw the tutorial again found that Name of file in tutorial was MovieContext, Now after renaming from MovieProvider to MovieContext, it works as expected. thankyou for those who replied tho. I was just tense coz was working on a python assigment too, I complete python assignment tyesterday and today this problem is solved too.

@hong developer 2019-12-03 01:10:50

You seem to lack understanding of what to import.

When you look at the code, it looks like you have a total of four js files.

App.js , Movie.js , MoviesList.js , other.js(The name is unknown)

MovieContext and MovieProvider both variables are in the other.js file.

Therefore, the import is as follows:

import { MovieProvider, MovieContext } from './other.js'; <= your file path

OR

import { MovieProvider, MovieContext } from './other'; <= your file path

@hong developer 2019-12-06 15:56:57

If my answer was useful, click the upvote button (▲) to the left of it. If it answered your question, click the checkmark (✓) to accept it. That way others know that you've been (sufficiently) helped. Also see stackoverflow.com/help/someone-answers

@Husmukh 2019-12-02 22:32:03

If you follow along the video you should import as following in App.js

 import { MovieProvider } from './MovieContext'; 

and not

import { MovieProvider } from './MovieProvider';

And also import as following in MovieList.js

import { MovieContext } from './MovieContext';

and not

import { MovieContext } from './Movie';

@Sara 2019-12-02 22:38:26

Well, Problem is that it does not show MovieContext at all, so how to import and and question was why it cant be imported

@Husmukh 2019-12-02 22:57:49

Check your import {MovieContext} on the MoviesList.js it should from "./MovieContext" not from "./Movie"

Related Questions

Sponsored Content

30 Answered Questions

[SOLVED] Programmatically navigate using react router

  • 2015-06-26 17:38:51
  • George Mauer
  • 640242 View
  • 1267 Score
  • 30 Answer
  • Tags:   reactjs react-router

22 Answered Questions

[SOLVED] What do these three dots in React do?

  • 2015-06-25 11:21:52
  • Thomas Johansen
  • 217518 View
  • 769 Score
  • 22 Answer
  • Tags:   javascript reactjs

61 Answered Questions

[SOLVED] Loop inside React JSX

  • 2014-04-05 05:29:28
  • Ben Roberts
  • 745774 View
  • 1139 Score
  • 61 Answer
  • Tags:   javascript reactjs

31 Answered Questions

[SOLVED] What is the difference between React Native and React?

26 Answered Questions

[SOLVED] Hide keyboard in react-native

28 Answered Questions

[SOLVED] React js onClick can't pass value to method

  • 2015-04-22 23:40:14
  • user1924375
  • 461884 View
  • 569 Score
  • 28 Answer
  • Tags:   javascript reactjs

1 Answered Questions

[SOLVED] React Context doesn't show value in Consumer

5 Answered Questions

1 Answered Questions

How to fix this error when using React Context

Sponsored Content