Props are arguments passed into React components. in React, we use props transferring data from parent component to child component. Sometimes, we need to pass data from parent to grandchild component and we have to write down props in every step of component until we rich to grandchild component as we need to, if we have three levels deep from parent to child, that will be a lot of writing props.
There are ways to not transferring data step by step, instead directly to grandchild component. one way is React-Redux, which is a way to create a store and collecting important data in that store and using any data inside the store to any component we want.
another way is using context, that is basically, creating a new component, this new component has all the data that we add as value, and surrounding this component to other components. So this way, we could be able to share that value to surrounding components.
Let’s explain this concept with an example;
I took that example from a YouTube video that explained concept very nicely and smoothly.
With this example, we have a movies array which has 3 movies with their names, price and id’s. With this app we are going to show those features in the browser.
on the below picture, I have an app folder and 3 components belongs to that folder, and surronging them with MovieProvider.
<MovieProvider >
<Nav />
<MovieList />
<AddMovie />
<MovieProvider />
I will mention this MovieProvider in a minute.
I created MovieContext.js file inside src, this file is basically, storing all the movies data with useState.
We have this file that have all the movies, how could I use those movies in other components without using props functionality ?
First of all, we need to import createContext from react,
and then strong this in a const MovieContext, like on line 4,
We are exporting this, because, we need to use this in other components.
We have also, MovieProvider fucntion, that has all the movies, returning
<MovieContext.Provider value={[movies, setMovies]} >
{props.children }
</MovieContext.Provider value={[movies, setMovies]} >
MovieContext.Provider is a way to passing data to child components, we createde the context first, then we applied to provider object to it, appliying to all children that this <movieContect.Provider has.
Let’s look at the consept of useContext,
as you can see on the below picture, we have a MovieList component, which belongs to App component, this component needs to have all the movies that it we could be able to do, movies.map and have <Movie /> for each movie component,
So how we bring the all movies from MovieContext to this component to here ?
So, we use useContext function, and import MovieContext, to bring all the movies to MovieList component. When we do this, all the value inside the MovieContext.Provider will come to MovieList component and
on line 11, we sign the movies with this,
const [movies, setMovies] = useContext(MovieContext)
we do the rest with line 16 to have each move’s individual component.
Just to show you another component that uses useContext here on the below picture, we have a Nav.js component, this is also belongs to App.js, We apply the same rules as we did in MovieList component, we import useContext and apply line 8 with useContext.
That is all, You could be able to use all the movies where ever component would you like to.
Resources
