{"id":72,"date":"2025-01-22T04:29:04","date_gmt":"2025-01-22T04:29:04","guid":{"rendered":"https:\/\/techkubo.com\/react\/?p=72"},"modified":"2025-05-19T09:36:39","modified_gmt":"2025-05-19T09:36:39","slug":"react-forms","status":"publish","type":"post","link":"https:\/\/techkubo.com\/react\/react-forms\/","title":{"rendered":"React Forms"},"content":{"rendered":"\n

Similar to HTML, forms in React allow users to interact with web pages. Adding a form in React follows the same approach as adding any other element.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Create a form that lets users input their name:<\/p>\n\n\n\n

This will function as expected, submitting the form and refreshing the page. However, this behavior is not ideal in React. Instead, we want to control the form using React to prevent this default behavior.<\/p>\n\n\n\n

function UserForm() {\n  return (\n    <form>\n      <label>Enter your name:\n        <input type="text" \/>\n      <\/label>\n    <\/form>\n  );\n}\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Handling Forms<\/h2>\n\n\n\n
Handling forms involves managing the data when it changes or gets submitted. In traditional HTML, form data is managed by the DOM, but in React, form data is typically managed by components.<\/p>\n\n\n\n
When the component handles the data, it is stored in the component state. You can manage changes by adding event handlers in the onChange<\/code> attribute. The useState<\/code> Hook helps track the value of inputs, providing a “single source of truth” for the entire application.<\/p>\n\n\n\n
Use the useState<\/code> Hook to manage input:<\/p>\n\n\n\n
import { useState } from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nfunction UserForm() {\n  const [userName, setUserName] = useState("");\n\n  return (\n    <form>\n      <label>Enter your name:\n        <input\n          type="text"\n          value={userName}\n          onChange={(e) => setUserName(e.target.value)}\n        \/>\n      <\/label>\n    <\/form>\n  );\n}\n\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Submitting Forms<\/h2>\n\n\n\n
You can manage the submit action by adding an event handler in the onSubmit<\/code> attribute of the <form><\/code> element:<\/p>\n\n\n\n
Add a submit button and an event handler for submission:<\/p>\n\n\n\n
import { useState } from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nfunction UserForm() {\n  const [userName, setUserName] = useState("");\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    alert(`The name you entered was: ${userName}`);\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <label>Enter your name:\n        <input\n          type="text"\n          value={userName}\n          onChange={(e) => setUserName(e.target.value)}\n        \/>\n      <\/label>\n      <input type="submit" \/>\n    <\/form>\n  );\n}\n\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Multiple Input Fields<\/h2>\n\n\n\n
To manage multiple input fields, you can add a name<\/code> attribute to each element. Initialize your state with an empty object, and use event.target.name<\/code> and event.target.value<\/code> to access the fields in the event handler. Use square bracket notation to update the state.<\/p>\n\n\n\n
Create a form with two input fields:<\/p>\n\n\n\n
import { useState } from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nfunction UserForm() {\n  const [formData, setFormData] = useState({});\n\n  const handleChange = (event) => {\n    const { name, value } = event.target;\n    setFormData((prevData) => ({ ...prevData, [name]: value }));\n  }\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    alert(JSON.stringify(formData));\n  }\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <label>Enter your name:\n        <input \n          type="text" \n          name="userName" \n          value={formData.userName || ""} \n          onChange={handleChange} \n        \/>\n      <\/label>\n      <label>Enter your age:\n        <input \n          type="number" \n          name="userAge" \n          value={formData.userAge || ""} \n          onChange={handleChange} \n        \/>\n      <\/label>\n      <input type="submit" \/>\n    <\/form>\n  );\n}\n\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n\n\n\n
\n
Note: Using a single event handler for multiple input fields results in cleaner code and is the recommended approach in React.<\/em><\/p>\n<\/blockquote>\n\n\n\n
<\/p>\n\n\n\n
Textarea<\/h2>\n\n\n\n
The textarea<\/code> element in React differs slightly from regular HTML. In HTML, the value of a textarea<\/code> is placed between the opening and closing tags. In React, it is set using the value<\/code> attribute, and we can manage it using the useState<\/code> Hook.<\/p>\n\n\n\n
A simple textarea<\/code> with some initial content:<\/p>\n\n\n\n
import { useState } from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nfunction UserForm() {\n  const [textareaContent, setTextareaContent] = useState(\n    "The content of a textarea goes in the value attribute"\n  );\n\n  const handleChange = (event) => {\n    setTextareaContent(event.target.value);\n  }\n\n  return (\n    <form>\n      <textarea value={textareaContent} onChange={handleChange} \/>\n    <\/form>\n  );\n}\n\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Select<\/h2>\n\n\n\n
A dropdown list, or select<\/code> box, in React is also somewhat different from HTML. In HTML, the selected value in the dropdown was defined using the selected<\/code> attribute. In React, the selected value is set using the value<\/code> attribute on the select<\/code> tag.<\/p>\n\n\n\n
import { useState } from 'react';\nimport ReactDOM from 'react-dom\/client';\n\nfunction UserForm() {\n  const [selectedCar, setSelectedCar] = useState("Volvo");\n\n  const handleChange = (event) => {\n    setSelectedCar(event.target.value);\n  }\n\n  return (\n    <form>\n      <select value={selectedCar} onChange={handleChange}>\n        <option value="Ford">Ford<\/option>\n        <option value="Volvo">Volvo<\/option>\n        <option value="Fiat">Fiat<\/option>\n      <\/select>\n    <\/form>\n  );\n}\n\nconst rootElement = ReactDOM.createRoot(document.getElementById('root'));\nrootElement.render(<UserForm \/>);<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
Similar to HTML, forms in React allow users to interact with web pages. Adding a form in React follows the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nReact Forms - React Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/techkubo.com\/react\/react-forms\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Forms - React Tutorial\" \/>\n<meta property=\"og:description\" content=\"Similar to HTML, forms in React allow users to interact with web pages. Adding a form in React follows the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techkubo.com\/react\/react-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"React Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-22T04:29:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-19T09:36:39+00:00\" \/>\n<meta name=\"author\" content=\"Manong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/\"},\"author\":{\"name\":\"Manong\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\"},\"headline\":\"React Forms\",\"datePublished\":\"2025-01-22T04:29:04+00:00\",\"dateModified\":\"2025-05-19T09:36:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/\"},\"wordCount\":339,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/techkubo.com\/react\/react-forms\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/\",\"url\":\"https:\/\/techkubo.com\/react\/react-forms\/\",\"name\":\"React Forms - React Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/#website\"},\"datePublished\":\"2025-01-22T04:29:04+00:00\",\"dateModified\":\"2025-05-19T09:36:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techkubo.com\/react\/react-forms\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techkubo.com\/react\/react-forms\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techkubo.com\/react\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techkubo.com\/react\/#website\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"name\":\"React Tutorial\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techkubo.com\/react\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/techkubo.com\/react\/#organization\",\"name\":\"React Tutorial\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"contentUrl\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"width\":300,\"height\":220,\"caption\":\"React Tutorial\"},\"image\":{\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\",\"name\":\"Manong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"caption\":\"Manong\"},\"sameAs\":[\"https:\/\/techkubo.com\"],\"url\":\"https:\/\/techkubo.com\/react\/author\/manong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Forms - React Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/techkubo.com\/react\/react-forms\/","og_locale":"en_US","og_type":"article","og_title":"React Forms - React Tutorial","og_description":"Similar to HTML, forms in React allow users to interact with web pages. Adding a form in React follows the […]","og_url":"https:\/\/techkubo.com\/react\/react-forms\/","og_site_name":"React Tutorial","article_published_time":"2025-01-22T04:29:04+00:00","article_modified_time":"2025-05-19T09:36:39+00:00","author":"Manong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Manong","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techkubo.com\/react\/react-forms\/#article","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/react-forms\/"},"author":{"name":"Manong","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965"},"headline":"React Forms","datePublished":"2025-01-22T04:29:04+00:00","dateModified":"2025-05-19T09:36:39+00:00","mainEntityOfPage":{"@id":"https:\/\/techkubo.com\/react\/react-forms\/"},"wordCount":339,"commentCount":0,"publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techkubo.com\/react\/react-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techkubo.com\/react\/react-forms\/","url":"https:\/\/techkubo.com\/react\/react-forms\/","name":"React Forms - React Tutorial","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/#website"},"datePublished":"2025-01-22T04:29:04+00:00","dateModified":"2025-05-19T09:36:39+00:00","breadcrumb":{"@id":"https:\/\/techkubo.com\/react\/react-forms\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techkubo.com\/react\/react-forms\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/techkubo.com\/react\/react-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techkubo.com\/react\/"},{"@type":"ListItem","position":2,"name":"React Forms"}]},{"@type":"WebSite","@id":"https:\/\/techkubo.com\/react\/#website","url":"https:\/\/techkubo.com\/react\/","name":"React Tutorial","description":"","publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techkubo.com\/react\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techkubo.com\/react\/#organization","name":"React Tutorial","url":"https:\/\/techkubo.com\/react\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/","url":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","contentUrl":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","width":300,"height":220,"caption":"React Tutorial"},"image":{"@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965","name":"Manong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","caption":"Manong"},"sameAs":["https:\/\/techkubo.com"],"url":"https:\/\/techkubo.com\/react\/author\/manong\/"}]}},"_links":{"self":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/72"}],"collection":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":2,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":191,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/72\/revisions\/191"}],"wp:attachment":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}