This is my first React context post. It will help you setup state using context and pass it through the component tree.

We are going to use the following

  • useState
  • Context Consumer
  • Context Provider
  • functional component
  • Minimal react app

State

What is a state in React? State is where we kept our data, it can be simple any value, such as count, an User object, or an array of Posts etc.

Context

Context is simplest way to pass state through component tree in Reactjs. It requires a context and a state. A context provider allow us to initialize/update the state.

Language example

A language example is the simplest way to demonstrate the use of Context in React app. In the App.js create the LanguageContext and inititalContext

This is functional component example in which a Language context used to store and manipulate state.

Create Context

 //App.js const LanguageContext = React.createContext({   language: "fr", });

The language state is initialized with fr value, short for French.

 This free site is ad-supported. Learn more
​