How to Use React Context API with Example

How to Use React Context API with Example

React Context API provides a way to pass data through the component tree without having to pass props down manually at each level.

React Context API

The React.createContext() function to you can create API in react.

const myContext = React.createContext(default Value);

Creating content item. When React delivers a subscription to this content item it will read the current value of the content from your nearest supplier over the tree.

The default Value argument is only used when an object does not have the same Provider above it in the tree. This can help to test things by separating them without wrapping them.

Context.Provider

<myContext.Provider value={/* some value */}>

All content comes with a Provider React component that allows destructive content to subscribe to contextual changes.

Read Also :  Higher Order Components Example in React

The Supplier’s section accepts the amount of the proposal to be transferred to the Provider’s offspring. One provider can be connected to multiple customers. Providers can be set up to write down prices more deeply within the tree.

All buyers who are descendants of the Provider will renew whenever the Supplier’s value system changes. Streaming from Provider to its affiliate customers is not subject to the shouldComponentUpdate process, so the buyer is updated even if part of the ancestral skip update.

Context.Consumer

<myContext.Consumer>
  {value => /* render something based on the context value */}
</myContext.Consumer>

The React section that registers for contextual changes. This allows you to subscribe to content within a function section.

Read Also :  How to Use Strict Mode in React

It takes work as a child. The function detects the current content value and returns the React node. The value difference transferred to the service will be equal to the value of the Provider closest to the above tree. In the absence of a Provider for the above context, the value dispute will be equal to the default Value forwarded to createContext().

Example

index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import App from './App'
export const myContext = React.createContext();
export default class Demo extends Component {
  state = {
    name : "Web-tuts"
  }

  render() {
    return (
      <div>
      <myContext.Provider value={this.state.name}>
        <p>This is Demo Component</p>
        <App></App>
      </myContext.Provider>
      </div>
    )
  }
}

ReactDOM.render(<Demo></Demo>,document.getElementById("root"));

App.js

import React, { Component } from 'react'
import Other from './Other'
export default class App extends Component {
    render() {
        return (
            <div>
                <p>This is App Component</p>
                <Other></Other>
            </div>
        )
    }
}

Other.js

Read Also :  Onclick to Get Current Date in React js
import React, { Component } from 'react'
import { myContext } from "./index";
export default class Other extends Component {
    render() {
        return (
            <div>
                <myContext.Consumer>
                    {data => data}
                </myContext.Consumer>
            </div>
        )
    }
}