chukwuyem

form

Oct 27th, 2020 (edited)
978
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {useContext, useEffect, useState} from 'react';
  2. import { UserContext } from '../context/UserContext';
  3.  
  4. const UserList = () => {
  5.     const {Users} = useContext(UserContext);
  6.     const {getUsers} = useContext(UserContext);
  7.     const {deleteUsers} = useContext(UserContext);
  8.     const {addUsers} = useContext(UserContext);
  9.  
  10.     const {email, setEmail} = useState('');
  11.     const{password, setPassword} = useState('');
  12.  
  13.    
  14.  
  15.  
  16.  
  17.  
  18.     useEffect(() =>{
  19.         getUsers()
  20.         //console.log("lala",getUsers());
  21.     })
  22.  
  23.     // const ChangeHandler = e => {
  24.     //   this.setState({[e.target.name]: e.target.value})
  25.     // }
  26.     const handleSubmit = (e) => {
  27.       e.preventDefault();
  28.       addUsers(email, password)
  29.       setEmail('')
  30.       setPassword('')
  31.       console.log(email, password);
  32.     }
  33.  
  34.    
  35.     return (
  36.         <div>
  37.          
  38.         <ul>
  39.           { Users.map(user =><div key={user.id}> <li>{user.id}<br></br> {user.email} </li><button onClick={() => deleteUsers(user.id)}>x</button> </div>)}
  40.         </ul>
  41.  
  42.         <div>
  43.         <form onSubmit={handleSubmit}>
  44.           <label>
  45.             Person Name:
  46.         <input type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} ></input>
  47.           </label>
  48.           <label>
  49.             Person Name:
  50.       <input type="text" name="password" value={password}  onChange={(e) => setPassword(e.target.value)} ></input>
  51.           </label>
  52.           <button type="submit" >Add</button>
  53.         </form>
  54.         </div>
  55.         </div>
  56.       )
  57. }
  58.  
  59.  
  60. export default UserList;
RAW Paste Data