Chapter 7: Forms and Validation

Introduction to Forms

In React, forms are used to collect user input. You can use the `useState` hook to store the form data and handle changes to the form.
Controlled Components

In React, a controlled component is a component that has its value controlled by React. To create a controlled component, you need to set the `value` prop and the `onChange` event handler:
import React, { useState } from 'react';
function NameForm() {
 const [name, setName] = useState('');
 function handleChange(event) {
   setName(event.target.value);
 }
 return (
   <form>
     <label>
       Name:
       <input type="text" value={name} onChange={handleChange} />
     </label>
   </form>
 );
}
In this example, the `input` element is a controlled component because its value is controlled by the `name` state.
Handling Form Submissions
 
To handle form submissions, you can use the `onSubmit` event handler:
import React, { useState } from 'react';
function NameForm() {
 const [name, setName] = useState('');
 function handleSubmit(event) {
   event.preventDefault();
   console.log(name);
 }
 function handleChange(event) {
   setName(event.target.value);
 }
 return (
   <form onSubmit={handleSubmit}>
     <label>
       Name:
       <input type="text" value={name} onChange={handleChange} />
     </label>
     <button type="submit">Submit</button>
   </form>
 );
}
In this example, the `handleSubmit` function is called when the form is submitted.
Validation

To validate form data, you can use JavaScript to check the input values:
 
import React, { useState } from 'react';
function NameForm() {
 const [name, setName] = useState('');
 const [error, setError] = useState(null);
 function handleSubmit(event) {
   event.preventDefault();
   if (name.length < 3) {
     setError('Name must be at least 3 characters long');
   } else {
     console.log(name);
   }
 }
 function handleChange(event) {
   setName(event.target.value);
 }
 return (
   <form onSubmit={handleSubmit}>
     <label>
       Name:
       <input type="text" value={name} onChange={handleChange} />
     </label>
     {error && <p style={{ color: 'red' }}>{error}</p>}
     <button type="submit">Submit</button>
   </form>
 );
}
In this example, the form data is validated when the form is submitted.
Example Code

Here's an example of a simple React app that handles form submissions and validation:

import React, { useState } from 'react';
function LoginForm() {
 const [username, setUsername] = useState('');
 const [password, setPassword] = useState('');
 const [error, setError] = useState(null);
 function handleSubmit(event) {
   event.preventDefault();
   if (username.length < 3 || password.length < 6) {
     setError('Invalid username or password');
   } else {
     console.log('Login successful!');
   }
 }
 return (
   <form onSubmit={handleSubmit}>
     <label>
       Username:
       <input type="text" value={username} onChange={(event) => setUsername(event.target.value)} />
     </label>
     <label>
       Password:
       <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
     </label>
     {error && <p style={{ color: 'red' }}>{error}</p>}
     <button type="submit">Login</button>
   </form>
 );
}
 
Here's a practice exercise:
Create a simple React app that displays a registration form with fields for username, email, and password. Validate the form data when the form is submitted.
Hint: Use the `useState` hook to store the form data and handle changes to the form. Use JavaScript to validate the form data.