useContext x useState

Author: potchangelo

src/App.js

@@ -1,14 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
 import LoginArea from './LoginArea';
 
-const fakeUser = { username: 'nice789', fullname: 'เต้า หมิงซื่อ' };
-
 const AuthContext = React.createContext();
 
 function App() {
+ const [auth, setAuth] = useState(null);
  return (
- <AuthContext.Provider value={fakeUser}>
+ <AuthContext.Provider value={{ auth, setAuth }}>
  <section className="app-section">
  <div className="app-container">
  <LoginArea />

src/LoginBox.js

@@ -1,22 +1,33 @@
 import { useContext } from "react";
 import { AuthContext } from "./App";
 
+const fakeUser = { username: 'nice789', fullname: 'เต้า หมิงซื่อ' };
+
 function LoginBox() {
- const auth = useContext(AuthContext);
+ const { auth, setAuth } = useContext(AuthContext);
+
+ function loginSubmit(event) {
+ event.preventDefault();
+ setAuth(fakeUser);
+ }
+
+ function logoutSubmit() {
+ setAuth(null);
+ }
 
  if (!!auth) {
  return (
  <div>
  <h3>เข้าสู่ระบบแล้วจ้า</h3>
  <p>Auth username = {auth.username}</p>
  <p>Auth fullname = {auth.fullname}</p>
- <p><button>Log out</button></p>
+ <p><button onClick={logoutSubmit}>Log out</button></p>
  </div>
  );
  }
 
  return (
- <form onSubmit>
+ <form onSubmit={loginSubmit}>
  <h3>โปรดเข้าสู่ระบบ</h3>
  <p><input type="text" placeholder="Username" /></p>
  <p><input type="password" placeholder="Password" /></p>