form

import React, {useContext, useEffect, useState} from 'react';
import { UserContext } from '../context/UserContext';

const UserList = () => {
    const {Users} = useContext(UserContext);
    const {getUsers} = useContext(UserContext);
    const {deleteUsers} = useContext(UserContext);
    const {addUsers} = useContext(UserContext);

    const {email, setEmail} = useState('');
    const{password, setPassword} = useState('');






    useEffect(() =>{
        getUsers()
        //console.log("lala",getUsers());
    })

    // const ChangeHandler = e => {
    //   this.setState({[e.target.name]: e.target.value})
    // }
    const handleSubmit = (e) => {
      e.preventDefault();
      addUsers(email, password)
      setEmail('')
      setPassword('')
      console.log(email, password);
    }


    return (
        <div>

        <ul>
          { Users.map(user =><div key={user.id}> <li>{user.id}<br></br> {user.email} </li><button onClick={() => deleteUsers(user.id)}>x</button> </div>)}
        </ul>

        <div>
        <form onSubmit={handleSubmit}>
          <label>
            Person Name:
        <input type="text" name="email" value={email} onChange={(e) => setEmail(e.target.value)} ></input>
          </label>
          <label>
            Person Name:
      <input type="text" name="password" value={password}  onChange={(e) => setPassword(e.target.value)} ></input>
          </label>
          <button type="submit" >Add</button>
        </form>
        </div>
        </div>
      )
}


export default UserList;