Global data that is shared throughout your application isn't limited to read-only API response data. Sometimes, components themselves need to update global state values. To enable this capability, we need to pass not only data from context producers, but also a mechanism to update the data. Since the data stored in a context provider is a state created with useState(), we can just pass along the setter function, along with the state value.
Let's illustrate these ideas by extending the sharing fetched data example. Instead of a user context, we'll add a status context. This way, components that are rendered within this context will have access to the status state value, and the status state setter function. Here's what the StatusProvider component looks like:
import React, { createContext, useState } from "react";
export const StatusContext = createContext();
export function StatusProvider({ children }) {
const value = useState...
