Manage Multiple States Using The Usestate Hooks In React.Js

import ReactDOM from 'react-dom'
import { useState } from 'react';


const Home = () => {

    const [name, setName] = useState('');

    const [email, setEmail] = useState('');

    const handleClick = () => {        
        alert(name + "***" + email) ;
    }

    const nameChangeHandler = (event) => {
        setName(event.target.value);
    }

    const emailChangeHandler = (event) => {
        setEmail(event.target.value);
    }

    return (
        <form>
            <div>
                Name:
                <p><input type="text" name="nameField" onChange={ nameChangeHandler}/></p>
                Email:
                <p><input type="text" name="emailField" onChange={emailChangeHandler}/></p>
                <button onClick={handleClick}>Click me</button>
            </div>
        </form>
    );
}

ReactDOM.render(<Home />, document.getElementById('root'));

Query/Feedback