Context API in React JS

React JS

In this tutorial we will discuss about Context API in React JS. Basically context is used to pass data from one component to another component. If we want to pass data from one component to another component then we use props in React JS but props is not good solution to pass data into multilevel component because un-necessary pass the props in to middle level component. For multilevel component we will use context API in React JS. We can also use Redux to pass data into multilevel component but redux is used to large application and it has some complexity with reducers and middleware.

React introduce Context API to pass data into multilevel component without using props.

First of all we will see how to pass data using props from one component to another component.

Parent.js

import React, { Component } from 'react'
import Child from './child.js'
class Parent extends Component {
    state = {
        tutorial: 'JavaScript Tutorial',
    }

    render() {
        const { tutorial } = this.state
        return (
            <Child tutorialName={tutorial} />
        )
    }
}
export default Parent

Child.js

import React, { Component } from 'react'
import SubChild from './subChild.js'
class Child extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { tutorialName } = this.props
        return (
            <SubChild tutorialName={tutorialName} />
        )
    }
}
export default Child

SubChild.js

SubChild.js

import React, { Component } from 'react'
class SubChild extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { tutorialName } = this.props
        return (
            <h1>
                Tutorial is: {tutorialName}
            </h1>

        )
    }
}
export default SubChild

App.js

import React from 'react';
import './App.css';
import Parent from './components/parent.js'

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

export default App;

Output –

Context API in React JS

In the above code example we have seen, there are three components and pass data using props from one component to another component. We have passed data from parent to child then child to subchild. If we want to pass data from parent to subchild then how to do, so for that purpose we will use Context API. Basically Context API is used to pass data from one component to another component without using props.

There are three step to use context in react, which are as follows-

  • Create the context
  • Provide the context value
  • Consume the context value

First of all we will create a context file in which we create the context using createContext (provided by React).

MyContext.js

import { createContext } from 'react'
export const MyContext = createContext({});

In the above code we have created context. Now we will provide the context value using provider.

Parent.js

import React, { Component } from 'react'
import Child from './child.js'
import { MyContext } from "./myContext.js";

class Parent extends Component {
    state = {
        tutorial: 'JavaScript Tutorial',
    }

    render() {
        const { tutorial } = this.state
        return (
            <MyContext.Provider value={tutorial}>
                <Child />
            </MyContext.Provider>
        )
    }
}
export default Parent

Child.js

import React, { Component } from 'react'
import SubChild from './subChild.js'
class Child extends Component {
    render() {
        return (
            <SubChild />
        )
    }
}
export default Child

In the above code we have provide the context value using provider then import child & subchild component. Now we consume the context value using consumer in the subchild component.

SubChild.js

import React, { Component } from 'react'
import { MyContext } from "./myContext.js";
class SubChild extends Component {
    render() {
        return (
            <MyContext.Consumer>
                {context => <h1>Tutorial is: {context}</h1>}
            </MyContext.Consumer>
        )
    }
}
export default SubChild

App.js

import React from 'react';
import './App.css';
import Parent from './components/parent.js'

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

export default App;

Output –

Context API in React JS

So in the above code we have have seen, we have created MyContext using MyContext.js file. In the parent component we have used provider to pass the value in to another component. When we use context provider then no need to pass data as a props into child component. We can access data in the subchild component using context consumer.

Use default value of context

If we want to use default value of context the we will remove provider from parent component and rest component (child & subchild) will remain same.

First of all we will set the default value of context. Like as below code.

MyContext.js

import { createContext } from 'react'
export const MyContext = createContext('React JS Tutorial'); // default value

Now we will remove only the provider from parent component and rest component (child & subchild) will remain same.

Parent.js

import React, { Component } from 'react'
import Child from './child.js'
class Parent extends Component {
    render() {
        return (
           <Child />
        )
    }
}
export default Parent

Output –

Default value of context

So in the above code we have seen, we have set the default value of context and remove the provider from the parent component.

So in this article you have seen, how to use context API in React JS.

If you want to improve this article or you find anything wrong/incorrect in this article then please leave a message using below comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

two + seventeen =