What is React Context?
It works similar to a global variable means if we want to send data from one component to another component directly then we can use React Context.
It solves the limitations of props because props will pass the data from the chain means the first component to second and second to third, we did not send data from first to third directly but using context we can pass data directly.
Example 1st:-
Note:- all components should be defined in same file
Example Third:-
All Component can be defined in different file.
1) Create First Component and call second component
2) Create Second Component and Call Third Component
Another Exanple of Create Context:-
React Context API
The React Context API is a component structure, which allows us to share data across all levels of the application. The main aim of Context API is to solve the problem of prop drilling (also called "Threading"). The Context API in React is given below.
React.createContext
Context.provider
Context.Consumer
Class.contextType
React.createContext
It creates a context object. When React renders a component which subscribes to this context object, then it will read the current context value from the matching provider in the component tree.
Syntax
const MyContext = React.createContext(defaultValue);
When a component does not have a matching Provider in the component tree, it returns the defaultValue argument. It is very helpful for testing components isolation (separately) without wrapping them.
Context.Provider
Every Context object has a Provider React component which allows consuming components to subscribe to context changes. It acts as a delivery service. When a consumer component asks for something, it finds it in the context and provides it to where it is needed.
Syntax
<MyContext.Provider value={/* some value */}>
It accepts the value prop and passes to consuming components which are descendants of this Provider. We can connect one Provider with many consumers. Context Providers can be nested to override values deeper within the component tree. All consumers that are descendants of a Provider always re-render whenever the Provider's value prop is changed. The changes are determined by comparing the old and new values using the same algorithm as Object.is algorithm.
Context.Consumer
It is the React component that subscribes to the context changes. It allows us to subscribe to the context within the function component. It requires the function as a component. A consumer is used to request data through the provider and manipulate the central data store when the provider allows it.
Syntax
<MyContext.Consumer>
{value => /* render something which is based on the context value */}
</MyContext.Consumer>
The function component receives the current context value and then returns a React node. The value argument which passed to the function will be equal to the value prop of the closest Provider for this context in the component tree. If there is no Provider for this context, the value argument will be equal to the defaultValue which was passed to createContext().
Class.contextType
The contextType property on a class used to assign a Context object which is created by React.createContext(). It allows you to consume the closest current value of that Context type using this.context. We can reference this in any of the component life-cycle methods, including the render function.
Note: We can only subscribe to a single context using this API. If we want to use the experimental public class field's syntax, we can use a static class field to initialize the contextType.
React Context API Example
Step1 Create a new React app using the following command.
$ npx create-react-app mycontextapi
Step2 Install bootstrap CSS framework using the following command.
$ npm install react-bootstrap bootstrap --save
Step3 Add the following code snippet in the src/APP.js file.
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
const BtnColorContext = React.createContext('btn btn-darkyellow');
class App extends Component {
render() {
return (
<BtnColorContext.Provider value="btn btn-info">
<Button />
</BtnColorContext.Provider>
);
}
}
function Button(props) {
return (
<div className="container">
<ThemedButton />
</div>
);
}
class ThemedButton extends Component {
static contextType = BtnColorContext;
render() {
return <button className={this.context} >
welcome to javatpoint
</button>;
}
}
export default App;
In the above code snippet, we have created the context using React.createContext(), which returns the Context object. After that, we have created the wrapper component which returns the Provider component, and then add all the elements as children from which we want to access the context.
Post a Comment
POST Answer of Questions and ASK to Doubt