What is context API Context API is a component structure that is provided by React to manage the states for all the levels of your application. It will work the same way as redux and it helps you to replace redux or avoid using third party libraries for your application. It will work the same as redux. We have to define our context and we just have to pass the values of context through the provider for our react application. Let us see how to create context and how to use it in our react application by creating a simple counter application to react. You must have installed node and npm. Then just create a new react project. Type the following command in your terminal. npx create-react-app contex-api Now you will have a react project, just create a folder with the name context inside /src folder and create an index.js file in it. This file will have a context for our counter application. We will create a new context using the createContext() method of React. Copy the following code in your src/context/index.js file. React “react” React.createContext({ : “Welcome to counter App!”, : }); import from export default title counter 0 In our context, we have defined two values one is a title and the other is counter to manage the count record for our counter application. Now we will see how to use those values inside our apps. just replace the content of the App.js file with the following code. React ‘react’; Context “./context” {
render(){ ( <Context.Consumer>
{context => (
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<h1>{context.title}</h1>
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button>Increment</button>
<p>Conter:- {context.counter}</p>
<button>Decrement</button>
</div>
</div>
)}
</Context.Consumer>
</React.Fragment>
);
}
}
export default App; import from import from . class App extends React Component return < > React.Fragment In the App.js file, we have imported the context which we had created earlier and we are using the values which are present inside that content using the Consumer method of React class. This is one of the ways to access the values which are present inside your context. Now run the application. open your terminal and go to the respective folder and type the following line to your terminal. npm start Visit http://localhost:3000 . you will see the following output. We have accessed our context API inside render method using the Consumer method. Right now our increment and decrement buttons are not working. Let write code to get them into action. We will write two functions increment() and decrement(), increment() function to increase the counter by one and decrement function to reduce counter by one. Add the following code in our App.js file before the render method. state = { : }
increment = { .setState({ : .state.counter + });
}
decrement = { .setState({ : .state.counter — });
} counter 0 => () this counter this 1 => () this counter this 1 So, we have our functions ready but if you went to you will see our buttons are not working yet. http://localhost:3000 then Because in our counter we are showing value which is present is context API and we are not updating context values yet. Let see how to update context values. For that, we will make some changes. We will create separate components for the title and counter. The title component will display the title of the application and the counter component will display the updated counter. We will create a new folder component in /src folder and create two files in it. We will name it CounterTitle.js and Counter.js respectively. Before that, we will do one thing we must have to update our context values as well, So let’s see how to update context values. Now we will replace the App.js file with the following code. React ‘react’; Context “./context” Counter “./component/Counter” CounterTitle “./component/CounterTitle” {
state = { : }
increment = { .setState({ : .state.counter + });
}
decrement = { .setState({ : .state.counter — });
}
render(){ ( <Context.Provider value={{ counter: this.state.counter }}>
<div style={{ display: ‘flex’, justifyContent: ‘center’, flexDirection: ‘column’, alignItems: ‘center’}}>
<CounterTitle />
<div style={{ display: ‘flex’, flexDirection: ‘row’, justifyContent: ‘space-around’}}>
<button onClick={this.increment}>Increment</button>
<Counter />
<button onClick={this.decrement}>Decrement</button>
</div>
</div>
)}
</Context.Provider>
</React.Fragment>
);
}
}
export default App; import from import from import from import from . class App extends React Component counter 0 => () this counter this 1 => () this counter this 1 return < > React.Fragment In the above code, I have use Provider function in the place of the consumer. Consumer function is used if you want to access the value from our context and Provider function is used to update or change the values of context which will be available for all the components of the application. We have imported Counter and CounterTitle components in App.js. Now let’s add the following code to the CounterTitle.js and Counter.js respectively. add the following code to CounterTitle.js file. React, {useContext} “react” Context “../context” { mycontext = useContext(Context); ;
} import from import from export default ( ) function CounterTitle const return {mycontext.title} < > h1 </ > h1 add the following code to Counter.js file. React, { useContext } “react” Context “../context” { mycontext = useContext(Context); } import from import from export default ( ) function Counter const return Counter: {mycontext.counter} < > p </ > p If you look at both the files you will see we have used functional components and we didn’t use any consumer function. If we are using functional component and we have to use context API’s value then we have useContext() hook in react. We are able to use context API in class and functional components both. Now run the app again and you will see our app is working fine now. Hurray… Conclusion We have learned how to use context API in class and functional components. If you want full code of the above counter app, you will get it on . https://github.com/mvcman/Counter-App.git

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to use context API in React

Too Long; Didn't Read

Mandar Waghe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to use context API in React

Too Long; Didn't Read

Mandar Waghe

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES