**Building Controlled and Uncontrolled Components** In this section, we will explore the concepts of controlled and uncontrolled components, which are fundamental to building robust forms and user interfaces in React. **What is a Controlled Component?** A controlled component is a component that receives input from the user and has its state managed by the parent component. The user's input is always validated and sanitized by the parent component, ensuring that the component receives a consistent and predictable state. Controlled components are often used for forms, text editors, and other user interface elements where the application needs to validate and control the user's input. **What is an Uncontrolled Component?** An uncontrolled component, on the other hand, is a component that receives user input and manages its own state. This means that the component is responsible for validating and sanitizing the user's input, and any errors or inconsistencies are handled by the component itself. Uncontrolled components are often used for dynamic elements, such as chat logs, log files, and other types of data that do not require validation or sanitization. **Key Characteristics of Controlled Components** Controlled components have the following key characteristics: * The component's state is managed by the parent component. * The component receives input from the user, which is then validated and sanitized by the parent component. * The parent component is responsible for updating the component's state. * The component's state is always consistent and predictable. **Key Characteristics of Uncontrolled Components** Uncontrolled components have the following key characteristics: * The component manages its own state. * The component receives user input and validates it automatically. * The component is responsible for handling any errors or inconsistencies in the input. * The component's state may be unpredictable or inconsistent. **Examples of Controlled and Uncontrolled Components** * Form inputs: text fields, checkboxes, radio buttons. * Text editors: textarea, editor components. * Date pickers: date input, time input. * Uncontrolled components: + Chat logs: logs are submitted automatically, without validation or sanitization. + Log files: logs are submitted automatically, without validation or sanitization. **Building Controlled Components** To build a controlled component, follow these steps: 1. Create a state variable to store the input value. 2. Use the `<input>` element to receive user input. 3. Use the `onChange` event handler to update the state variable. 4. Validate and sanitize the user's input in the state update handler. 5. Use the `useState` hook to manage the component's state. Example: ```jsx import React, { useState } from 'react'; function ControlledTextInput() { const [value, setValue] = useState(''); const handleInputChange = (event) => { const inputValue = event.target.value; const sanitizedInput = inputValue.trim(); // sanitize the input setValue(sanitizedInput); }; return ( <input type="text" value={value} onChange={handleInputChange} placeholder="Enter some text" /> ); } ``` **Building Uncontrolled Components** To build an uncontrolled component, follow these steps: 1. Create a state variable to store the input value without validation or sanitization. 2. Use the `onInput` event handler to update the state variable. 3. Use a `textarea` or `editor` component to receive user input. Example: ```jsx import React, { useState } from 'react'; function UncontrolledTextArea() { const [value, setValue] = useState(''); const handleInput = (event) => { setValue(event.target.value); }; return ( <textarea value={value} onChange={handleInput} placeholder="Enter some text" /> ); } ``` **Practical Takeaways** * Controlled components are preferred for forms and user interface elements that require validation and sanitization. * Uncontrolled components are preferred for dynamic elements that do not require validation or sanitization. * Use the `useState` hook to manage component state. * Use the `onChange` event handler to update state in controlled components. * Use the `onInput` event handler to update state in uncontrolled components. **Question** 1. What is the main difference between a controlled and uncontrolled component? 2. When would you use a controlled component, and when would you use an uncontrolled component?