How to update the Context value in a Provider from the Consumer?

by

You could use the useContext hook to achieve this. It’s quite easy to use it in the child elements of the Provider. As an example…

authContext.js

import { createContext } from "react";

const authContext = createContext({
  authenticated: false,
  setAuthenticated: (auth) => {}
});

export default authContext;

Login.js (component consuming the Context)

import React, { useContext } from "react";
import authContext from "./authContext";

export default () => {
  const { setAuthenticated } = useContext(authContext);
  const handleLogin = () => setAuthenticated(true);
  const handleLogout = () => setAuthenticated(false);

  return (
    <React.Fragment>
      <button onClick={handleLogin}>login</button>
      <button onClick={handleLogout}>logout</button>
    </React.Fragment>
  );
};

Finally the index.js

import ReactDOM from "react-dom";
import React, { useState } from "react";

import authContext from "./authContext";
import Login from "./Login";

const App = () => {
  const [authenticated, setAuthenticated] = useState(false);

  return (
    <authContext.Provider value={{ authenticated, setAuthenticated }}>
      <div> user is {`${authenticated ? "" : "not"} authenticated`} </div>
      <Login />
    </authContext.Provider>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

As you can see, it becomes quite easy to consume the data stored in the context using the useContext hook. Of course, as with every React hook, it only works with functional components.

If you want to see the code working.
https://codesandbox.io/s/react-playground-forked-wbqsh?file=/index.js

More Related Contents:

  1. React Context vs React Redux, when should I use each one? [closed]
  2. How to update React Context from inside a child component?
  3. How to change the value of a Context with useContext?
  4. Does new React Context API trigger re-renders?
  5. Remove duplicate from array within array
  6. Pass props to parent component in React.js
  7. Get viewport/window height in ReactJS
  8. React Hooks useState() with Object
  9. What is {this.props.children} and when you should use it?
  10. How to access component methods from “outside” in ReactJS?
  11. Render Object properties in React
  12. What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
  13. What is the difference between using constructor vs state = {} to declare state in react component?
  14. React – How to force a function component to render?
  15. Development server of create-react-app does not auto refresh
  16. What is StrictMode in React?
  17. Arrow functions and the use of parentheses () or {} or ({})
  18. ReactJS – Pass props with Redirect component
  19. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  20. How to do a redirect to another route with react-router?
  21. What does calling super() in a React constructor do?
  22. How target DOM with react useRef in map
  23. How can I update an object inside of an array in firestore? [duplicate]
  24. Increase JavaScript Heap size in create-react-app project
  25. using css modules how do I define more than one style name
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. How to mock React component methods with jest and enzyme
  28. Could not find “store” in either the context or props of “Connect(App)”
  29. Class based component vs Functional components what is the difference ( Reactjs ) [duplicate]
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment