Write a program to pass values to child using context in ReactJS ?
Last Updated :
30 Oct, 2023
Passing values to chile in react js is an important concept in react js. It simply can be achieved by using prop drilling but it is not the right way in case of big project. Hence we will pass the values to child using context in react js with the help of useContext Hook.
Prerequisites
Approach
To pass values to child using context in React JS we will use context API. It is a method to avoid prop-drilling into deeply nested components. Without context API, we pass props from the parent component all the way via subcomponents and finally to the child component, where it is required. Context API removes the prop-drilling in the subcomponents and it allows the child component to access the piece of data with the help of useContext() hook wherever the data is required in any component. It makes the code much more readable, leaner, and less complex.
Creating React Application
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project structure
Steps to pass values to child using Context API in react :
- Create a context initializing with the type of data it will hold ( it is an empty object in this case ).
- Provide the context to the main file, so that the children are able to access the context data via useContext() hook.
- Use the required properties of context in specific components.
Example: The user data stored in app.js is passed to child components using useContext hook for creating context.
Javascript
import Component1 from "./components/Component1" ;
import { userContext } from "./context/UserContext" ;
export const mainStyle = {
backgroundColor: "#4E9F3D" ,
padding: "10px" ,
borderRadius: "10px" ,
boxShadow:
"rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px" ,
width: "300px" ,
margin: "20px auto" ,
};
function App() {
let data = {
theme: "light" ,
name: "Geek" ,
userId: "gfg249" ,
email: "gfg249@geeksforgeeks.org" ,
contactNumber: "+91 999999999" ,
noOfQuestionsSolved: 120,
codingStreak: 30,
};
return (
<userContext.Provider value={data}>
<div className= "App" >
<h1 style={{ color: "green" }}>
GeeksForGeeks
</h1>
<h2>Context API</h2>
<Component1 />
</div>
</userContext.Provider>
);
}
export default App;
|
Javascript
import { createContext } from "react" ;
export const userContext = createContext({});
|
Javascript
import React, { useContext } from "react" ;
import Component2 from "./Component2" ;
import Component3 from "./Component3" ;
import { mainStyle } from "./../App" ;
import { userContext } from "./../context/UserContext" ;
const Component1 = () => {
const { name } = useContext(userContext);
return (
<div>
<div style={mainStyle}>
<h2>Component1</h2>
<h3>Welcome</h3> <h3>Geek {name} </h3>
</div>
<div
style={{
display: "flex" ,
justifyContent: "space-around" ,
}}
>
<Component2 />
<Component3 />
</div>
</div>
);
};
export default Component1;
|
Javascript
import React from "react" ;
import Component4 from "./Component4" ;
import { mainStyle } from "./../App" ;
const Component2 = () => {
return (
<div style={mainStyle}>
<h2>Component-2</h2>
<p>Performance status at GeeksForGeeks</p>
<Component4 />
</div>
);
};
export default Component2;
|
Javascript
import React from "react" ;
import { mainStyle } from "../App" ;
import Component5 from "./Component5" ;
const Component3 = () => {
return (
<div style={mainStyle}>
<h2>Component3</h2>
<p>Geek's personal information</p>
<Component5 />
</div>
);
};
export default Component3;
|
Javascript
import React, { useContext } from "react" ;
import { userContext } from "./../context/UserContext" ;
const Component4 = () => {
const { noOfQuestionsSolved, codingStreak } =
useContext(userContext);
return (
<div>
<h2>Component4</h2>
<h3>Total number of Questions solved </h3>{ " " }
<h3>{noOfQuestionsSolved}</h3>
<h3>Coding streak</h3>
<h3>{codingStreak} Days </h3>
</div>
);
};
export default Component4;
|
Javascript
import React, { useContext } from "react" ;
import { userContext } from "./../context/UserContext" ;
const Component5 = () => {
const { email, contactNumber } =
useContext(userContext);
return (
<div>
<h2>Component5</h2>
<h3>Email </h3>
<h3>{email}</h3>
<h3>Contact Number</h3>{ " " }
<h3> {contactNumber} </h3>
</div>
);
};
export default Component5;
|
Step to run application: Open the terminal and run the following command.
npm start
Output: Our final app will be visible on http://localhost:3000/ on browser and will look something like this.
Share your thoughts in the comments
Please Login to comment...