{"id":7603,"date":"2023-02-02T14:02:10","date_gmt":"2023-02-02T08:32:10","guid":{"rendered":"https:\/\/innovationm.co\/?p=7603"},"modified":"2023-02-02T14:02:10","modified_gmt":"2023-02-02T08:32:10","slug":"single-state-handles-the-form-in-react-js","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/","title":{"rendered":"Single state handles the form in React Js"},"content":{"rendered":"<p>HTML forms allow users to enter data into input fields that accept text, passwords, emails, numbers, colors, phone numbers, dates, and more. Once all inputs have been collected, the form can be submitted for further processing using the submit button.<\/p>\n<p><strong>React Form<\/strong><\/p>\n<p>HTML form elements maintain their own state. Updating this state property is only possible through the setState() method.<\/p>\n<p>The React in-built hook,\u00a0useState()\u00a0makes it easier to manage.<\/p>\n<p>Good programming practice is to treat React&#8217;s state as the only source of truth. A React component with a form inside must handle everything that happens to the form when its<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>React Form Code<\/strong><\/p>\n<pre>import { useEffect, useState } from \"react\";\r\n\r\nimport \".\/styles.css\";\r\n\r\n\r\n\r\n\r\nexport default function App() {\r\n\r\n\u00a0 const [state, setState] = useState({\r\n\r\n\u00a0\u00a0\u00a0 firstName: \"\",\r\n\r\n\u00a0\u00a0\u00a0 lastName: \"\",\r\n\r\n\u00a0\u00a0\u00a0 email: \"\",\r\n\r\n\u00a0\u00a0\u00a0 password: \"\",\r\n\r\n\u00a0\u00a0\u00a0 address: \"\",\r\n\r\n\u00a0\u00a0\u00a0 checkMe: false,\r\n\r\n\u00a0\u00a0\u00a0 state: \"\"\r\n\r\n\u00a0 });\r\n\r\n\u00a0 const handleChange = (evt) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0 const name = evt.target.name;\r\n\r\n\u00a0\u00a0\u00a0 const value =\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 evt.target.type === \"checkbox\" ? evt.target.checked : \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0evt.target.value;\r\n\r\n\u00a0\u00a0\u00a0 setState((prevState) =&gt; ({ ...prevState, [name]: value }));\r\n\r\n\u00a0 };\r\n\r\n\u00a0 useEffect(() =&gt; {\r\n\r\n\u00a0\u00a0\u00a0 console.log(state);\r\n\r\n\u00a0 }, [state]);\r\n\r\n\r\n\r\n\r\n\u00a0 return (\r\n\r\n\u00a0\u00a0\u00a0 &lt;&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Full Name&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"text\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"firstName\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.firstName}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange= {handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Last Name&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"text\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"lastName\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.lastName}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange={handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Email&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"text\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"email\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.email}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange={handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Password&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"password\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"password\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.password}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange={handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;State&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;select name=\"state\" onChange={handleChange} value={state.state}&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;jaunpur&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;Allahabad&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;option&gt;Prayagraj&lt;\/option&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/select&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Address&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"text\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"address\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.address}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange={handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;label&gt;Check Me&lt;\/label&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;input\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type=\"checkbox\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 name=\"checkMe\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 value={state.checkMe}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 onChange={handleChange}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/&gt;\r\n\r\n\u00a0 );\r\n\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML forms allow users to enter data into input fields that accept text, passwords, emails, numbers, colors, phone numbers, dates, and more. Once all inputs have been collected, the form can be submitted for further processing using the submit button. React Form HTML form elements maintain their own state. Updating this state property is only [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,257],"tags":[722,346,247,402],"class_list":["post-7603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","tag-blog","tag-javascript","tag-react","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Single state handles the form in React Js - InnovationM - Blog<\/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:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Single state handles the form in React Js - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"HTML forms allow users to enter data into input fields that accept text, passwords, emails, numbers, colors, phone numbers, dates, and more. Once all inputs have been collected, the form can be submitted for further processing using the submit button. React Form HTML form elements maintain their own state. Updating this state property is only [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-02T08:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1689\" \/>\n\t<meta property=\"og:image:height\" content=\"950\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\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:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Single state handles the form in React Js\",\"datePublished\":\"2023-02-02T08:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/\"},\"wordCount\":113,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Single-state-handle-the-form-in-React-Js.png\",\"keywords\":[\"blog\",\"JavaScript\",\"react\",\"react js\"],\"articleSection\":[\"JavaScript\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/\",\"name\":\"Single state handles the form in React Js - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Single-state-handle-the-form-in-React-Js.png\",\"datePublished\":\"2023-02-02T08:32:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Single-state-handle-the-form-in-React-Js.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Single-state-handle-the-form-in-React-Js.png\",\"width\":1689,\"height\":950},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/single-state-handles-the-form-in-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Single state handles the form in React Js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Single state handles the form in React Js - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Single state handles the form in React Js - InnovationM - Blog","og_description":"HTML forms allow users to enter data into input fields that accept text, passwords, emails, numbers, colors, phone numbers, dates, and more. Once all inputs have been collected, the form can be submitted for further processing using the submit button. React Form HTML form elements maintain their own state. Updating this state property is only [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/","og_site_name":"InnovationM - Blog","article_published_time":"2023-02-02T08:32:10+00:00","og_image":[{"width":1689,"height":950,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Single state handles the form in React Js","datePublished":"2023-02-02T08:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/"},"wordCount":113,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png","keywords":["blog","JavaScript","react","react js"],"articleSection":["JavaScript","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/","url":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/","name":"Single state handles the form in React Js - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png","datePublished":"2023-02-02T08:32:10+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2023\/02\/Single-state-handle-the-form-in-React-Js.png","width":1689,"height":950},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/single-state-handles-the-form-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Single state handles the form in React Js"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7603"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7603\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7604"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}