The document explains how to use the React Context API with both class and functional components to avoid the challenges of props drilling in nested components. It outlines the steps to create context, use providers to share data from parent components, and create consumers to receive that data in child components. The tutorial showcases how context allows for global data accessibility without extensive prop passing through component layers.

2. React: How To Utilize Context API With Class And
Functional Components:
• Well, React official documentation says Contexts provide a way
to route data through the component tree without having to
manually propagate props at each level.
• Think about a scenario in which several separate components at
various degrees of nested levels need to access the same data. Data
must be sent as props to the component tree when using React so
that any component that requires it may access it.

3. • Parent components can send data to nested child components in this
way. They use many layers of components to transfer data from one
piece to another.
• Props drilling is a challenge when data must be routed across
numerous features because specific parts get the braces and then
pass them on to their child components as props.

4. Level 1 – Parent Component (App.js):
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserProfile from "./UserProfile.js";
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentUser: ""
};
}
render() {
return (
); } } constrootElement = document.getElementById(“root”); ReactDOM.render(, rootElement);

5. Level – 2 UserProfile.js
import React from "react";
import CurrentUserProfile from "./CurrentUserProfile.js";
constUserProfile = props => {
return (
); }; export default UserProfile;

6. Level – 3 CurrentUserProfile.js
import React from "react";
constCurrentUserProfile = props => {
return (
{props.currentUser}
); }; export default CurrentUserProfile;

7. • The nested components in the preceding example have three layers.
The nested element is receiving currentUser information as a prop.
The CurrentUserProfile component receives data from the UserProfile
component via props.
• The UserProfile component does not use the props data in its way.
After three layers of nesting components, examine the situation
where many merely pass the props to their children. In extensive
applications, this may be a significant problem.

8. • This is where the React Context API comes into play. Context makes it
possible to communicate values like these without passing a prop up
and down the component hierarchy. For a tree of React components,
context offers data that may be deemed globally accessible without
explicitly supplying data to each inner part.
• The previous example may readily be converted to Context-based.
The present component does not require a complete overhaul. Only a
few replacement parts are needed (provider and consumer).

9. Step-1: Initialize the Context
We are developing a framework in which suppliers and consumers may
thrive.
constContextObject = React.createContext(defaultValue)
createContext() method is used to create a context. You can also
pass the default value to the context variable by passing it to the
createContext().

10. UserContext.js:
import React from "react";
constUserContext = React.createContext({});
export default UserContext;
This Context object’s current value will be retrieved by React when it
displays a component that subscribes to this Context object. When a
provider cannot be found in the tree, the default value of context is
used.

11. Step – 2: Create the Provider:
• Two Provider and Consumer Components are created when we create
context. We can develop Provider and Consumer components, export
them, and let other members utilize them as needed.
• This is what UserContext.js would look like after constructing Provider
and Consumer import React from “react”;
• Creating context gives us two Provider and Consumer Components.
We can create Provider and Consumer components and export them
so that they are available for the other components to use them.

12. No matter at what level this context is used, the Provider must be
wrapped around the parent component. Using the Provider, I’ll
encapsulate App.js and send userCurrent to the down tree.
// this is the equivalent to the createStore method of Redux
constUserContext = React.createContext();
// creating Provider and Consumer and exporting them
export constUserProvider = UserContext.Provider
export constUserConsumer = UserContext.Consumer
export default UserContext;

13. App.js:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserProfile from "./UserProfile.js";
import { UserProvider } from "./UserContext.js";
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentUser: {
name: "Mr.Willey",
address: "USA",
mobile: "+1 (850) 780-1313"
}
};
}
render() {
return (
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

14. • The nested child receives the currentUser information from the
parent. We’re getting our information about current users from the
state.
• We can get API information about a user and then pass it on to the
child components that utilize that information. Wrapping userprofile
in a provider imported from UserContext.js is what we’re doing.
• The currentUser object may be accessed by any nested part. When
the provider’s value changes, any consumers nested in it must re-
render.

15. Step – 3: Create the Consumer:
• In UserContext.js, we’ve already written code to consume it.
Wrapping the child component in the Consumer for Class component
and using the useContext method of React to access context
information is the most straightforward approach to get access to the
context. We can then use props to get at the context value sent in
earlier in the process.

16. Using the prior illustration as a guide:
(without using context one),
UserProfile.js:
import React from "react";
import CurrentUserProfile from "./CurrentUserProfile.js";
constUserProfile = props => {
return ( ); };
export default UserProfile;

17. CurrentUserProfile.js:
import React, { useContext } from “react”;
//importing UserContext from UserContext.js file
import { UserContext } from “./UserContext.js”;
constCurrentUserProfile = () => { const user = useContext(UserContext);
return (
{user.name}
{user.address}
{user.mobile}
);
}
}
)};
export default CurrentUserProfile;
(access the Context value.)

18. Getting data from component A to component Z by passing it to
multiple layers of components. As Data has to be passed through
multiple components, this problem is called Props drilling. Because
some components only just get the props and pass them to the child
component as props. Below is an example of the above scenario.
Image Source: toptal.com

19. Conclusion:
This is how to utilize react context API with class and functional
components. Professional react js development services offered
by Bosc Tech are helpful to know how to use react context API with
functional and class components. Hope, this will help.
Content Resource: https://bosctechlabs.com/react-utilize-context-api-
with-class-and-functional-components/