{"id":1364,"date":"2021-07-10T18:04:19","date_gmt":"2021-07-10T12:34:19","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1364"},"modified":"2021-07-10T18:04:19","modified_gmt":"2021-07-10T12:34:19","slug":"react-tutorial-basic-form-of-react-code","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/","title":{"rendered":"React Tutorial : Basic Form of React Code"},"content":{"rendered":"<h2>Basic Form of React.<\/h2>\n<pre>import React, { useState } from 'react';\r\n\/\/ JS\r\n\/\/ const input = document.getElementById('myText');\r\n\/\/ const inputValue = input.value\r\n\/\/ React\r\n\/\/ value, onChange\r\n\r\nconst ControlledInputs = () =&gt; {\r\n    \r\n    const handleSubmit = (e) =&gt; {\r\n        e.preventDefault(); \r\n        console.log('Hello World...'); \r\n       \r\n    }\r\n    \r\n  return &lt;&gt;\r\n      &lt;article&gt;\r\n        &lt;form className=\"form\"&gt;\r\n            &lt;div className=\"form-control\"&gt;\r\n                &lt;label htmlFor=\"firstName\"&gt;\r\n                      Name :  \r\n                &lt;\/label&gt;\r\n                &lt;input type=\"text\" id=\"firstName\" name=\"firstName\"\/&gt;\r\n            &lt;\/div&gt;\r\n        &lt;div className=\"form-control\"&gt;\r\n                &lt;label htmlFor=\"email\"&gt;\r\n                      Email :  \r\n                &lt;\/label&gt;\r\n                &lt;input type=\"text\" id=\"email\" name=\"email\" onClick={handleSubmit}\/&gt;\r\n            &lt;\/div&gt;  \r\n                &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\r\n        &lt;\/form&gt;\r\n      &lt;\/article&gt;\r\n      &lt;\/&gt;;\r\n};\r\n\r\nexport default ControlledInputs;<\/pre>\n<p>Above example of react basic form and how can implement it on react project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Basic Form of React. import React, { useState } from &#8216;react&#8217;; \/\/ JS \/\/ const input = document.getElementById(&#8216;myText&#8217;); \/\/ const inputValue = input.value \/\/ React \/\/ value, onChange const ControlledInputs [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1364","post","type-post","status-publish","format-standard","hentry","category-react"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Tutorial : Basic Form of React Code - MyFreeOnlineTools<\/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:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Tutorial : Basic Form of React Code - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Basic Form of React. import React, { useState } from &#039;react&#039;; \/\/ JS \/\/ const input = document.getElementById(&#039;myText&#039;); \/\/ const inputValue = input.value \/\/ React \/\/ value, onChange const ControlledInputs [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-10T12:34:19+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"React Tutorial : Basic Form of React Code\",\"datePublished\":\"2021-07-10T12:34:19+00:00\",\"dateModified\":\"2021-07-10T12:34:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\"},\"wordCount\":25,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"React\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\",\"name\":\"React Tutorial : Basic Form of React Code - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2021-07-10T12:34:19+00:00\",\"dateModified\":\"2021-07-10T12:34:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Tutorial : Basic Form of React Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Tutorial : Basic Form of React Code - MyFreeOnlineTools","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:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/","og_locale":"en_US","og_type":"article","og_title":"React Tutorial : Basic Form of React Code - MyFreeOnlineTools","og_description":"Basic Form of React. import React, { useState } from 'react'; \/\/ JS \/\/ const input = document.getElementById('myText'); \/\/ const inputValue = input.value \/\/ React \/\/ value, onChange const ControlledInputs [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2021-07-10T12:34:19+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"React Tutorial : Basic Form of React Code","datePublished":"2021-07-10T12:34:19+00:00","dateModified":"2021-07-10T12:34:19+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/"},"wordCount":25,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["React"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/","url":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/","name":"React Tutorial : Basic Form of React Code - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2021-07-10T12:34:19+00:00","dateModified":"2021-07-10T12:34:19+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/react-tutorial-basic-form-of-react-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Tutorial : Basic Form of React Code"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1364"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1364\/revisions"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}