# Lesson 1 - Setup a Simple Form and Input ## All About React Form ### What is a Form in React? A form in React is a web interface component that allows users to input data that can then be processed by a web application. Common examples include login forms, sign-up forms, and contact forms In React, forms are built using HTML form elements like ``, `

`, \<button>`<select>`, etc., just like in traditional HTML. However, React provides a way to manage form data and handle user interactions within your component state.

React forms leverage the framework's ability to maintain application state and handle user inputs efficiently. By combining these forms with React’s state and event-handling features, developers can create interactive and controlled user interfaces.

**Key Concepts**

* **Controlled Components:** In React, *<mark style="color:purple;">form elements are typically "controlled" components</mark>*. This means their values are managed by the component's state. The component's state dictates what the user sees in the input fields.
* **`preventDefault()`:**
  * The <mark style="color:orange;">`preventDefault`</mark> method is a JavaScript function available in browser events that stops the default behavior of an event.
  * When a form is submitted, the browser by default performs a page refresh.
  * To prevent this default behavior and handle the form submission within your React component, you use the `preventDefault()` method on the `onSubmit` event of the form.
  * This allows you to capture the form data and perform any necessary actions (e.g., making API calls, updating state) before the page reloads.

```jsx
// Example of preventDefault
function handleSubmit(event) {
  event.preventDefault(); // Prevents the form from reloading the page
  console.log("Form submitted!");
}

return (
  <form onSubmit={handleSubmit}>
    <input type="text" placeholder="Enter your name" />
    <button type="submit">Submit</button>
  </form>
);
```

### How to Use Forms for Input, Button Click, and Controlled Elements

**1. Input Handling**

Inputs in React can be managed using two main approaches: controlled and uncontrolled components.

* **Controlled Components:** In a controlled component, the form data is handled by React state. The `value` of an input is set by a state variable, and the `onChange` event updates the state. This ensures React has full control over the form input.

#### **Example of Controlled Input:**

JavaScript(XML)

```jsx
import React, { useState } from 'react';

function ControlledForm() {
  const [username, setUsername] = useState('');

const handleSubmit = (event) => {
    event.preventDefault(); // Prevent default form submission

// Process the form data (e.g., send it to a server)
    //setUserName(event.target.value)
    console.log('Username:', username); 
  };

return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        value={username} // Controlled input - value comes from state
        onChange={(event) => setUsername(event.target.value)} 
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;
```

**Explanation**

1. **State Management:** The `username` state variable is used to store the current value of the input field.
2. **Controlled Input:** The value of the input field is linked to the `username` state using the `value` attribute. This ensures that the input field always reflects the current state of the component.
3. **`onChange` Handler:** The `onChange` event handler updates the `username` state whenever the user types in the input field. This keeps the component's state in sync with the user's input.
4. **`onSubmit` Handler:** The `handleSubmit` function is called when the form is submitted.
   * `event.preventDefault()` is used to prevent the default form submission behavior.
   * The function then processes the form data (in this case, simply logging the username to the console).

**Key Points**

* Forms in React are typically controlled components, meaning their values are managed by the component's state.

* The <mark style="color:orange;">`preventDefault()`</mark> method is essential for handling form submissions within React components.

* By using state and event handlers, you can create interactive forms that respond to user input and perform actions accordingly.

* **Uncontrolled Components:** Uncontrolled components use refs to access the DOM elements directly, instead of relying on state. This approach is less common in React but can be useful in certain scenarios.

**Example of Uncontrolled Input:**

```jsx
import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
  };

return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}
```

### **Controlling Form Elements**

To control form elements in React, you need to:

1. Bind the `value` of the input to a state variable.
2. Update the state variable using an `onChange` handler.

**Example of Multiple Controlled Inputs:**

```jsx
function MultiInputForm() {
  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({ //set input filed data one by one
      ...prevData,
      [name]: value,
    }));
  };

const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Enter your email"
      />
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Enter your password"
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

### Code Explanation

**State Management:**

* The component uses the `useState` hook to manage the form data. It creates a state object called `formData` with two properties: <mark style="color:orange;">`email`</mark> (initially an empty string) and <mark style="color:orange;">`password`</mark> (initially an empty string).

**Input Handling:**

* The `handleChange` function is responsible for handling changes in the input fields. It's triggered whenever the user types in either the email or password field.
  * It destructures the <mark style="color:purple;">`event.target`</mark> object to access the `name` (which corresponds to the input field's `name` attribute) and the `value` (the entered text).
  * It uses the `setFormData` function to update the state. The updated state is created using a callback function that receives the previous state (`prevData`). This ensures you don't accidentally overwrite other form data properties.
  * Inside the callback function, it spreads the previous state (`...prevData`) to create a copy, and then updates the specific property (`[name]`) with the new value.

**Form Submission:**

* The `handleSubmit` function handles form submission when the user clicks the "Submit" button.
  * It prevents the default form submission behavior using `event.preventDefault()`.
  * In a real application, you would typically make an API call to submit the form data to a server or perform some other action. Here, it simply logs the current state (`formData`) to the console for demonstration purposes.

### Summary

Forms in React are powerful tools for building interactive user interfaces. By using React’s state management and event-handling capabilities, developers can create highly responsive and user-friendly forms. Key concepts like controlled components, `preventDefault`, and handling inputs and buttons effectively enable developers to implement robust form features in their applications.

---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://reactjs.koida.tech/forms-and-interactivity-grocery-list-app/lesson-1-setup-a-simple-form-and-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.