Forms

Forms in React are a crucial part of any web application for collecting user input. Unlike HTML forms, React forms are controlled by the state within the component. Here's how forms work in React:

Controlled Components

In React, form elements like <input>, <textarea>, and <select> are controlled components. This means that the form element's value is controlled by React's state, not by the DOM. You set the value attribute of the form element to a state variable and update that state variable using the setState method when the user interacts with the form.

Handling User Input

To capture user input, you usually set up event handlers for form elements. The most common event is onChange, which is triggered whenever the user types into an input field or makes a selection in a dropdown.

Example

Here's a simple example of a controlled input element:

Live Editor

function App() { const [colors, setColors] = useState(["red"]); const [colorInput, setColorInput] = useState(""); const updateColorsList = (e) => { e.preventDefault(); var temp = [... colors, colorInput] setColors(temp); } return ( <> <div className="App"> {colors.map((color, i) => <div key={i}>{color}</div>)} </div> <form onSubmit={updateColorsList}> <input type='text' value={colorInput} id='colorInputId' onChange={e => setColorInput(e.target.value)} /> <button type='submit'>Add</button> </form> </> ); }

function App() {

  const [colors, setColors] = useState(["red"]);
  const [colorInput, setColorInput] = useState("");

  const updateColorsList = (e) => {
    e.preventDefault();
    var temp = [... colors, colorInput]
    setColors(temp);
  }

  return (
    <>
      <div className="App">
        {colors.map((color, i) => <div key={i}>{color}</div>)}
      </div>
      <form onSubmit={updateColorsList}>
        <input type='text' value={colorInput} id='colorInputId' onChange={e => setColorInput(e.target.value)} />
        <button type='submit'>Add</button>
      </form>
    </>
  );
}

Result

Loading...

Form Validation

React doesn't have built-in form validation, but you can easily implement it yourself. You can set up state variables to track errors and display error messages conditionally.

Submitting Forms

To handle form submission, you can set up an onSubmit event handler on the <form> element itself. Inside this handler, you can gather all the form data and send it to a server or process it as needed.

Using Libraries

For complex forms, you might want to use libraries like Formik or React Hook Form to manage your form state and validation more efficiently.

By understanding these basics, you can create robust forms in React that offer a smooth user experience.