var Component=(()=>{var f=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),b=(e,t)=>{for(var a in t)s(e,a,{get:t[a],enumerable:!0})},i=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!g.call(e,o)&&o!==a&&s(e,o,{get:()=>t[o],enumerable:!(r=h(t,o))||r.enumerable});return e};var D=(e,t,a)=>(a=e!=null?f(p(e)):{},i(t||!e||!e.__esModule?s(a,"default",{value:e,enumerable:!0}):a,e)),y=e=>i(s({},"__esModule",{value:!0}),e);var u=N((v,m)=>{m.exports=_jsx_runtime});var x={};b(x,{default:()=>l});var n=D(u());function c(e){let t={code:"code",p:"p",pre:"pre",...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:`Handling forms in React is typically done by storing the values of the form fields in state. For example:\\`}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:`import * as React from 'react' function ExampleForm() { const [firstName, setFirstName] = React.useState('') const [lastName, setLastName] = React.useState('') function handleSubmit(e) { e.preventDefault() // Do something with the data } return ( ) } `})}),` `,(0,n.jsx)(t.p,{children:`The browser has a built-in API called FormData that makes it easy to get the data from a form. Even if you're using React, FormData simplifies the process of obtaining the data, without needing to manage the state of each input.`}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:`import * as React from 'react' function ExampleForm() { function handleSubmit(e) { e.preventDefault() const formData = new FormData(e.target) const firstName = formData.get('firstName') const lastName = formData.get('lastName') // Do something with the data } return ( ) } `})}),` `,(0,n.jsx)(t.p,{children:`FormData is also a Request body type for the Fetch API. If you're using an edge function to handle form submissions, you can use FormData to quickly obtain the data from the request.`}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-javascript",children:`function handleRequest(request) { const formData = await request.formData() const firstName = formData.get('firstName') const lastName = formData.get('lastName') // Do something with the data } `})})]})}function l(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(c,{...e})}):c(e)}return y(x);})(); ;return Component;