Forms in React

Forms are how users interact with your web applications they type, select, check boxes, and submit data. In React, handling forms requires a different approach than traditional HTML because React components manage their own state.

HTML Forms vs React Forms

In HTML, form elements like ``, `

`, and `<select>` maintain their own state and update based on user input. In React, mutable state is typically kept in the component's state and updated with `setState()`.</font></div><div><font size="4"><br></font></div><blockquote contenteditable="true" style="border-left: 4px solid rgb(204, 204, 204); margin: 1em 0px; padding: 0.5em 10px; background-color: rgb(249, 249, 249);"><font size="4">React gives you two ways to handle forms: controlled components (where React controls the input) and uncontrolled components (where the DOM controls the input).</font></blockquote><div><font size="4"><br></font></div><div><font size="5">Basic Form Structure</font></div><pre data-language="jsx"><code class="language-jsx" contenteditable="true"><div style="color: rgb(204, 204, 204); background-color: rgb(31, 31, 31); font-family: Consolas, "Courier New", monospace; line-height: 19px;"><font size="4"><div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">SimpleForm</span>() {</div><div>  <span style="color: #569cd6;">const</span> [name, setName] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div><div>  <span style="color: #569cd6;">const</span> [email, setEmail] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div><div><br></div><div>  <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleSubmit</span>(event) {</div><div>    event.<span style="color: #dcdcaa;">preventDefault</span>(); <span style="color: #6a9955;"></span></div><div>    console.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'Form submitted:'</span>, { name, email });</div><div>  }</div><div><br></div><div>  <span style="color: #c586c0;">return</span> (</div><div>    <form onSubmit={handleSubmit}></div><div>      <div></div><div>        <label></div><div>          Name:</div><div>          <input</div><div>            type=<span style="color: #ce9178;">"text"</span></div><div>            value={name}</div><div>            onChange={(e) => <span style="color: #dcdcaa;">setName</span>(e.target.value)}</div><div>          /></div><div>        </label></div><div>      </div></div><div>      <div></div><div>        <label></div><div>          Email:</div><div>          <input</div><div>            type=<span style="color: #ce9178;">"email"</span></div><div>            value={email}</div><div>            onChange={(e) => <span style="color: #dcdcaa;">setEmail</span>(e.target.value)}</div><div>          /></div><div>        </label></div><div>      </div></div><div>      <button type=<span style="color: #ce9178;">"submit"</span>>Submit</button></div><div>    </form></div><div>  );</div><div>}</div></font></div></code></pre><div><font size="4"><br></font></div><div><font size="5">Form Elements in React</font></div><div><font size="4"><br></font></div><table style="width: 100%; border-collapse: collapse;"><thead><tr><th style="background-color: rgb(0, 0, 0); color: white; padding: 8px;"><font size="4">Element</font></th><th style="background-color: rgb(0, 0, 0); color: white; padding: 8px;"><font size="4">Value Attribute</font></th><th style="background-color: rgb(0, 0, 0); color: white; padding: 8px;"><font size="4">Change Event</font></th></tr></thead><tbody><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`<input type="text">`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`value`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`onChange`</font></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`<textarea>`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`value`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`onChange`</font></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`<select>`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`value` on select</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`onChange`</font></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`<input type="checkbox">`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`checked`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`onChange`</font></td></tr><tr><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`<input type="radio">`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`checked`</font></td><td style="border: 1px solid rgb(204, 204, 204); padding: 8px;"><font size="4">`onChange`</font></td></tr></tbody></table><div><font size="4"><br></font></div><div><font size="5">Handling Multiple Inputs</font></div><div><font size="4"><br></font></div><div><font size="4">When you have many form fields, you can use a single state object and handle changes dynamically:</font></div><pre data-language="jsx"><code class="language-jsx" contenteditable="true"><div style="color: rgb(204, 204, 204); background-color: rgb(31, 31, 31); font-family: Consolas, "Courier New", monospace; line-height: 19px;"><font size="4"><div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">RegistrationForm</span>() {</div><div>  <span style="color: #569cd6;">const</span> [formData, setFormData] = <span style="color: #dcdcaa;">useState</span>({</div><div>    username: <span style="color: #ce9178;">''</span>,</div><div>    email: <span style="color: #ce9178;">''</span>,</div><div>    password: <span style="color: #ce9178;">''</span>,</div><div>    newsletter: <span style="color: #569cd6;">false</span></div><div>  });</div><div><br></div><div>  <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleChange</span>(event) {</div><div>    <span style="color: #569cd6;">const</span> { name, value, type, checked } = event.target;</div><div>    <span style="color: #dcdcaa;">setFormData</span>(prev => ({</div><div>      ...prev,</div><div>      [name]: type === <span style="color: #ce9178;">'checkbox'</span> ? checked : value</div><div>    }));</div><div>  }</div><div><br></div><div>  <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">handleSubmit</span>(event) {</div><div>    event.<span style="color: #dcdcaa;">preventDefault</span>();</div><div>    console.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'Form data:'</span>, formData);</div><div>  }</div><div><br></div><div>  <span style="color: #c586c0;">return</span> (</div><div>    <form onSubmit={handleSubmit}></div><div>      <input</div><div>        name=<span style="color: #ce9178;">"username"</span></div><div>        value={formData.username}</div><div>        onChange={handleChange}</div><div>        placeholder=<span style="color: #ce9178;">"Username"</span></div><div>      /></div><div>      <input</div><div>        name=<span style="color: #ce9178;">"email"</span></div><div>        type=<span style="color: #ce9178;">"email"</span></div><div>        value={formData.email}</div><div>        onChange={handleChange}</div><div>        placeholder=<span style="color: #ce9178;">"Email"</span></div><div>      /></div><div>      <input</div><div>        name=<span style="color: #ce9178;">"password"</span></div><div>        type=<span style="color: #ce9178;">"password"</span></div><div>        value={formData.password}</div><div>        onChange={handleChange}</div><div>        placeholder=<span style="color: #ce9178;">"Password"</span></div><div>      /></div><div>      <label></div><div>        <input</div><div>          name=<span style="color: #ce9178;">"newsletter"</span></div><div>          type=<span style="color: #ce9178;">"checkbox"</span></div><div>          checked={formData.newsletter}</div><div>          onChange={handleChange}</div><div>        /></div><div>        Subscribe to newsletter</div><div>      </label></div><div>      <button type=<span style="color: #ce9178;">"submit"</span>>Register</button></div><div>    </form></div><div>  );</div><div>}</div></font></div></code></pre><div><font size="4"><br></font></div><div><font size="5">Two Minute Drill</font></div><div><font size="4"><br></font></div><div><ul><li><font size="4">Forms in React can be controlled (React state) or uncontrolled (DOM state).</font></li></ul><ul><li><font size="4">Always call `preventDefault()` on form submission to prevent page refresh.</font></li></ul><ul><li><font size="4">Different form elements use different value props: `value` for text inputs, `checked` for checkboxes/radios.</font></li></ul><ul><li><font size="4">Use a single state object and a generic `handleChange` function for forms with many fields.</font></li></ul><ul><li><font size="4">The `name` attribute of inputs should match the state property names.</font></li></ul></div>

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

Forms in React

Need more clarification?