React Context

A React application consists of components that can receive props passed from the parent. As we know, props flow from the parent component down to a child component. React context can be used to save a state value and make it available and accessible to all components without passing it down as props. React context creates a general location where data can be placed and retrieved.

Creating a context

Open the context.js file. On line 3, a context is created by using React.createContext. On line 5, a function named AppProvider is defined. Inside this function on line 6, we declare a state variable called data and a setData function that will change the data state variable. The created context stores a string value and a function to change that value.

An AppContext.Provider component is returned from the AppProvider function, which is wrapped with the children prop. The children prop is a general reference to all components that are placed inside of a parent component. The AppContext.Provider has a value prop to which we pass data and setData. The AppContext.Provider` is returned on line 8.

The <DisplayName/> component is a child of the parent, <App/>. So, the children prop is any component placed inside of a parent.

To use the data stored in the context, we define a function (hook) called useData. This hook extracts the data and the function used for changing the data from the context. On line 16, we pass the AppContext that we created defined on line 3 to React.useContext. On line 17, an if check is performed to determine if we have an AppContext. The AppContext is returned from the function on line 20, or we throw an error if context isn’t found. An object is exported from the file on line 23 that contains an AppProvider component and the useData hook.

Using React context

To use the created React context, the components that consume the context are wrapped in a Context.Provider. Remember the context.js file in which we exported the AppProvider? The AppProvider is used to wrap the App component. The AppProvider becomes the parent of the application.

On line 6 of the index.js file, AppProvider is imported from the context.js. The AppProvider is used to wrap the App component, making it the parent component. Any component that needs access to the stored context can import the useData hook. On line 2 of the viewDataComponent.js file, the useData hook is imported. The useData hook returns the data and setData functions saved in context. We only need the data here, so we extract it on line 5. The data is displayed in the component on line 7.

The setDataComponent.js file is a component used to set the value of the data inside the context. The setData function is destructured from the useData hook. The input textbox has an event handler attached to its onChange event called handleChange. The value of the textbox is passed to the setData function to change it. This causes the component to rerender.