16 Forms - biswajitsundara/react GitHub Wiki

React uses forms to allow users to interact with the web page.

• Form handling is about tracking the changes in value or when data gets submitted.
• In react data is handled by components & it's stored in the component state.
• Data changes are tracked by adding event handlers in the onChange attribute.
• We can use the useState Hook to keep track of each inputs value

import {useState} from 'react';

export const RegisterForm = () => {
    const [username, setUsername] = useState('');

    const submitHandler = (event) =>{
        event.preventDefault();
        alert(`form data is ${username}`);
    }

    return <form onSubmit={submitHandler}>
        <label>Enter Your Name </label>
        <input type='text' value={username} onChange = {(event)=> setUsername(event.target.value)}/>
        <button type='submit'>Submit</button>
      </form>
 }

function App() {
  return <RegisterForm/>;
}

export default App;