Usecontext React Simple Example

Have recently bumped upon a very nice and simple example to use UseContext in React to share variable and methods across all the components.

Reference Link

	import { createContext } from "react";
	const authContext = createContext({
	authenticated: false,
	setAuthenticated: (auth) => {}
	});
	export default authContext;

view raw context.js hosted with ❤ by GitHub

	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"));

view raw index.js hosted with ❤ by GitHub

	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>
	);
	};

view raw Login.js hosted with ❤ by GitHub