LoginForm.js

// LoginForm.js

import React from 'react';
import  { useValue } from './useValue';

export function LoginForm({ handleSubmit }) {

    const  { value, assignValue } = useValue(''); // empty string is the initial value;
    
    function handleChange(e) {
        assignValue(e.target.value); // Fire up our custom hook when the user is typing.
    }

    function onSubmit(e) {
        e.preventDefault();
        handleSubmit({ value });
    }

    return (
        <form onSubmit={(e) => onSubmit(e)}>
            <input name="name" type="text" value={value} onChange={(e) => handleChange(e)}/>
            <button type="submit" >Submit</button>
        </form>
    )

}