React Forms and Controlled Inputs

Forms in React

Forms are essential to React applications as they enable user interaction. Users can enter data, make selections, and submit forms. This user input can be processed, stored, or sent to a backend.

Forms in JSX work similarly to HTML forms. A typical form contains elements like <label>, <input>, <select>, and <textarea>, enclosed within a <form> tag. The form typically includes a <button> for submission.

Example Form in JSX

Here is a basic form in JSX:

  

    Name:
    
  
  

    Email:
    
  
  

    Phone:
    
  
  Submit 

    

Note: JSX uses htmlFor instead of HTML's for, since for is a reserved word in JavaScript.

Controlled Inputs

Controlled inputs are input fields whose values are managed by React state. This ensures synchronization between the UI and the component state.

Steps to Create a Controlled Input

1. Create a state variable.

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

2. Assign the state variable to the value attribute of the input.

<input id='name' type='text' value={name} />

3. Add an onChange event handler to update the state.

 setName(e.target.value)}
  value={name} 
/>
        

Handling Events Properly

Event handlers should be passed as references, not invoked directly. If arguments are required, use an anonymous function.

Do NOT invoke my onClick callback!
 
 changeFunc(e.target.value)} />
    

Complete Example: Controlled Input Form

Here is a complete example of a form with controlled inputs:

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

  return (
    
 {e.preventDefault(); setName('')}}>
       setName(e.target.value)}
        placeholder="Type something!"
      />
      Submit
    
  ); 
};
    

Clicking submit clears the input field by resetting the name state to an empty string.

Benefits of Controlled Inputs

• Keeps form data in sync with React state.
• Allows validation and pre-filled values.
• Ensures controlled handling of user input.

Further Exploration

To continue learning, visit:

• React useState Documentation
• MDN Docs on Forms

Conclusion

React forms and controlled inputs provide a structured way to handle user input. Using controlled inputs ensures that form data is always in sync with state, making validation and updates seamless.