Skip to content

Instantly share code, notes, and snippets.

@pubudu-ranasinghe
Created November 3, 2019 12:41
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
react-context-example-18
import React from "react";
import Todos from "./components/Todos";
import Login from "./components/Login";
import { TodoProvider } from "./contexts/TodoContext";
import { AuthProvider, useAuthContext, logout } from "./contexts/AuthContext";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
function App() {
return (
<AuthProvider>
<Router>
<div className="App">
<Greeting />
<Switch>
<Route path="/todos">
<TodoProvider>
<Todos />
</TodoProvider>
</Route>
<Route path="/">
<Login />
</Route>
</Switch>
</div>
</Router>
</AuthProvider>
);
}
function Greeting() {
const { auth, dispatch } = useAuthContext();
if (auth.isLoggedIn)
return (
<p>
Hello, {auth.name}!
<button onClick={e => dispatch(logout())}>Logout</button>
</p>
);
return <p>You are not logged in</p>;
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment