{"id":6690,"date":"2022-09-06T14:57:56","date_gmt":"2022-09-06T13:57:56","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=6690"},"modified":"2022-09-06T14:57:56","modified_gmt":"2022-09-06T13:57:56","slug":"react-forms","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-forms\/","title":{"rendered":"React: Forms"},"content":{"rendered":"\n<p>Basic example from: <a href=\"https:\/\/www.w3schools.com\/react\/react_forms.asp\">https:\/\/www.w3schools.com\/react\/react_forms.asp<\/a><\/p>\n\n\n\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">import { useState } from 'react';\r\nimport ReactDOM from 'react-dom\/client';\r\n\r\nfunction MyForm() {\r\n  const [inputs, setInputs] = useState({});\r\n\r\n  const handleChange = (event) => {\r\n    const name = event.target.name;\r\n    const value = event.target.value;\r\n    setInputs(values => ({...values, [name]: value}))\r\n  }\r\n\r\n  const handleSubmit = (event) => {\r\n    event.preventDefault();\r\n    alert(inputs);\r\n  }\r\n\r\n  return (\r\n    &lt;form onSubmit={handleSubmit}>\r\n      &lt;label>Enter your name:\r\n      &lt;input \r\n        type=\"text\" \r\n        name=\"username\" \r\n        value={inputs.username || \"\"} \r\n        onChange={handleChange}\r\n      \/>\r\n      &lt;\/label>\r\n      &lt;label>Enter your age:\r\n        &lt;input \r\n          type=\"number\" \r\n          name=\"age\" \r\n          value={inputs.age || \"\"} \r\n          onChange={handleChange}\r\n        \/>\r\n        &lt;\/label>\r\n        &lt;input type=\"submit\" \/>\r\n    &lt;\/form>\r\n  )\r\n}\r\n\r\nconst root = ReactDOM.createRoot(document.getElementById('root'));\r\nroot.render(&lt;MyForm \/>);<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Basic example from: https:\/\/www.w3schools.com\/react\/react_forms.asp<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6690","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=6690"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6690\/revisions"}],"predecessor-version":[{"id":6691,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/6690\/revisions\/6691"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=6690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=6690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=6690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}