</div></pre></div></div>, and <div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">code</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div><select></div></pre></div></div> are represented as HTML elements. When working with TypeScript, we need to provide the correct event types for handling user interactions, such as changes or submissions.</p></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden"><div class="p-6 border-b border-gray-200/50"><h3 class="text-xl font-bold text-gray-900 flex items-center"><div class="w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-6 h-6 text-indigo-600" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div>Use `React.ChangeEvent` for input changes and `React.FormEvent` for form submissions.</h3></div><div class="p-6 prose max-w-none text-gray-700"><p>When an input field's value changes, it triggers an event. For these events, TypeScript uses <code>React.ChangeEvent<HTMLInputElement></code> for input elements, <code>React.ChangeEvent<HTMLTextAreaElement></code> for textareas, and <code>React.ChangeEvent<HTMLSelectElement></code> for select elements. For form submission, <code>React.FormEvent<HTMLFormElement></code> is the appropriate type.</p></div><div class="flex justify-center py-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-6 h-6 text-gray-400" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div><div class="px-6 pb-6"><div class="p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600"><p>When an input field's value changes, it triggers an event. For these events, TypeScript uses specific event types that extend the generic <code>React.ChangeEvent</code>. For standard <code><input></code> elements, you'll use <code>React.ChangeEvent<HTMLInputElement></code>. For <code><textarea></code> elements, it's <code>React.ChangeEvent<HTMLTextAreaElement></code>. For <code><select></code> elements, the type is <code>React.ChangeEvent<HTMLSelectElement></code>. These types provide access to the <code>target</code> property, which is typed as the specific HTML element, allowing you to safely access properties like <code>value</code> and <code>name</code>. When a form is submitted, the event type is <code>React.FormEvent<HTMLFormElement></code>, which gives you access to the form element itself and its associated data.</p></div></div></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6"><div class="flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg><div class="text-xl font-medium text-indigo-900 prose prose-xl max-w-none"><span>What TypeScript event type should be used for handling changes in a standard <code><input></code> element within a React component?</span></div></div><div class="px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl"><p>React.ChangeEvent<!-- --><HTMLInputElement></p></div></div></div><div><h2 id="heading-typing-form-data-state" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Typing Form Data State</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Managing the state of your form data requires defining a clear structure. TypeScript interfaces or types are ideal for this, ensuring consistency and predictability.</p></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden"><div class="p-6 border-b border-gray-200/50"><h3 class="text-xl font-bold text-gray-900 flex items-center"><div class="w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-6 h-6 text-indigo-600" aria-hidden="true"><path d="M12 7v14"></path><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path></svg></div>Define an interface for your form data to ensure type safety.</h3></div><div class="p-6 prose max-w-none text-gray-700"><p>Create an interface that mirrors the structure of your form's data. This interface will define the expected types for each form field, such as strings, numbers, or booleans.</p></div><div class="flex justify-center py-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-6 h-6 text-gray-400" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></div><div class="px-6 pb-6"><div class="p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600"><p>To maintain type safety for your form's data, it's best practice to define an interface or type that represents the shape of your form's state. For example, if you have a login form with fields for email and password, you might define an interface like this: <code>interface LoginFormState { email: string; password: string; }</code>. This interface can then be used to type your component's state, ensuring that you always have the correct data types for each field. This approach helps catch errors early in the development process, as TypeScript will flag any discrepancies between your state and the defined interface.</p></div></div></div></div><div><h2 id="heading-handling-form-submissions-with-typed-data" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Handling Form Submissions with Typed Data</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>When a form is submitted, you'll want to process the data in a type-safe manner. This involves accessing the form data from the event and ensuring it conforms to your defined types.</p></div></div><div><div class="flex flex-col lg:flex-row gap-6 my-8 border-l-4 border-blue-500 pl-6 bg-gray-50 py-6 pr-6"><div class="flex-1 prose max-w-none text-gray-800"><p>When handling form submissions, you'll typically prevent the default browser behavior and then access the form data. The <code>event.currentTarget</code> property of a <code>React.FormEvent</code> will be typed as <code>HTMLFormElement</code>, allowing you to access its elements. A common pattern is to iterate over the form elements or use <code>FormData</code> to collect the values. Ensuring these values are correctly parsed and assigned to your typed state is key. For instance, if a number input is expected, you might need to parse the string value to a number.</p></div><div class="flex-1 w-full lg:w-auto"><div class="flex items-center justify-center bg-gray-100 border border-gray-200 rounded-lg p-8 w-full h-48"><div class="text-center text-gray-500"><div class="text-2xl mb-2">📚</div><p class="text-sm">Text-based content</p><p class="text-xs text-gray-400">Library pages focus on text content</p></div></div></div></div></div><div><div class="my-6 p-6 rounded-2xl border-l-4 shadow-lg bg-blue-50 border-blue-400 text-blue-800"><div class="flex items-start"><div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-compare-arrows w-6 h-6 text-blue-600" aria-hidden="true"><circle cx="5" cy="6" r="3"></circle><path d="M12 6h5a2 2 0 0 1 2 2v7"></path><path d="m15 9-3-3 3-3"></path><circle cx="19" cy="18" r="3"></circle><path d="M12 18H7a2 2 0 0 1-2-2V9"></path><path d="m9 15 3 3-3 3"></path></svg></div><div class="prose max-w-none text-current"><p>Consider using libraries like <code>react-hook-form</code> or <code>formik</code> which abstract away much of the boilerplate for form handling and integrate seamlessly with TypeScript.</p></div></div></div></div><div><h2 id="heading-example-a-simple-typed-form" class="text-2xl font-semibold mt-8 mb-4 text-gray-900">Example: A Simple Typed Form</h2></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><p>Let's look at a basic example of a typed form component in React with TypeScript.</p></div></div><div><div class="prose max-w-none text-gray-800 leading-relaxed my-4"><div class="my-6 bg-gray-900 rounded-lg overflow-hidden shadow-lg border border-gray-700"><div class="flex items-center justify-between px-4 py-3 bg-gray-800 border-b border-gray-700"><div class="flex items-center space-x-3"><div class="flex space-x-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><div class="w-3 h-3 bg-green-500 rounded-full"></div></div><span class="text-sm text-gray-300 font-mono">typescript</span></div><div class="flex items-center space-x-2"><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy w-3 h-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button><button class="flex items-center space-x-1 px-3 py-1.5 text-xs text-gray-300 hover:text-white bg-gray-700 hover:bg-gray-600 rounded transition-colors" title="Edit code"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-pen w-3 h-3" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"></path></svg><span>Edit</span></button></div></div><div class="p-4 overflow-x-auto"><pre class="text-sm font-mono leading-relaxed text-gray-100"><div>import React, { useState, ChangeEvent, FormEvent } from 'react';</div><div></div><div>interface UserProfile {</div><div>  name: string;</div><div>  email: string;</div><div>}</div><div></div><div>const UserProfileForm: React.FC = () => {</div><div>  const [profile, setProfile] = useState<UserProfile>({</div><div>    name: '',</div><div>    email: '',</div><div>  });</div><div></div><div>  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {</div><div>    const { name, value } = e.target;</div><div>    setProfile(prevState => ({</div><div>      ...prevState,</div><div>      [name]: value,</div><div>    }));</div><div>  };</div><div></div><div>  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {</div><div>    e.preventDefault();</div><div>    console.log('User Profile Submitted:', profile);</div><div>    // Here you would typically send the profile data to an API</div><div>  };</div><div></div><div>  return (</div><div>    <form onSubmit={handleSubmit}></div><div>      <div></div><div>        <label htmlFor="name">Name:</label></div><div>        <input</div><div>          type="text"</div><div>          id="name"</div><div>          name="name"</div><div>          value={profile.name}</div><div>          onChange={handleInputChange}</div><div>        /></div><div>      </div></div><div>      <div></div><div>        <label htmlFor="email">Email:</label></div><div>        <input</div><div>          type="email"</div><div>          id="email"</div><div>          name="email"</div><div>          value={profile.email}</div><div>          onChange={handleInputChange}</div><div>        /></div><div>      </div></div><div>      <button type="submit">Save Profile</button></div><div>    </form></div><div>  );</div><div>};</div><div></div><div>export default UserProfileForm;</div></pre></div></div></div></div><div><div class="my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6"><div class="flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg><div class="text-xl font-medium text-indigo-900 prose prose-xl max-w-none"><span>In the example, what is the purpose of the <code>UserProfile</code> interface?</span></div></div><div class="px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl"><p>It defines the expected structure and types for the form's state data (name and email).</p></div></div></div><div class="mt-12 pt-8 border-t border-gray-200"><h2 class="text-2xl font-bold text-gray-900 mb-6">Learning Resources</h2><div class="space-y-3"><div><a href="https://www.typescriptlang.org/docs/handbook/react/forms.html" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">TypeScript Official Documentation: Forms</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">The official TypeScript documentation provides in-depth guidance on handling forms within React applications, covering event types and state management.</p></div><div><a href="https://react.dev/reference/react-dom/components/form" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Documentation: Forms</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">The official React documentation explains how to manage form state and handle user input, which is foundational for applying TypeScript types.</p></div><div><a href="https://react-hook-form.com/typescript" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">React Hook Form: TypeScript Examples</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">This resource offers practical examples and best practices for using React Hook Form with TypeScript, a popular library for efficient form handling.</p></div><div><a href="https://formik.org/docs/guides/typescript" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Formik: TypeScript Guide</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">Learn how to integrate Formik, another powerful form management library, with TypeScript for robust form validation and submission.</p></div><div><a href="https://blog.logrocket.com/react-typescript-event-handling/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Understanding React Event Handling with TypeScript</a><span class="text-gray-500 text-sm ml-2">(<!-- -->blog<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A blog post detailing how to correctly type event handlers in React components using TypeScript, with clear explanations and code snippets.</p></div><div><a href="https://www.freecodecamp.org/news/typing-form-state-in-react-with-typescript/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Typing Form State in React with TypeScript</a><span class="text-gray-500 text-sm ml-2">(<!-- -->blog<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">This article breaks down the process of defining types for form state in React, making your form data management more predictable.</p></div><div><a href="https://www.youtube.com/watch?v=z20f24_j1_s" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">Advanced React Form Handling with TypeScript</a><span class="text-gray-500 text-sm ml-2">(<!-- -->video<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">A video tutorial that dives into advanced techniques for handling forms in React with TypeScript, including validation and submission patterns.</p></div><div><a href="https://www.youtube.com/watch?v=5_3f8_8y9-g" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">TypeScript Generics in React</a><span class="text-gray-500 text-sm ml-2">(<!-- -->video<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">Understanding TypeScript generics is key to typing React components effectively, including form elements and their events.</p></div><div><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">MDN Web Docs: HTMLFormElement</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">Reference for the HTMLFormElement interface, providing details on its properties and methods, useful for understanding the `currentTarget` in form events.</p></div><div><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 font-medium">MDN Web Docs: EventTarget</a><span class="text-gray-500 text-sm ml-2">(<!-- -->documentation<!-- -->)</span><p class="text-sm text-gray-600 mt-1 ml-0">Information on the EventTarget interface, the base interface for all event objects in the DOM, which helps in understanding event propagation and properties.</p></div></div></div></div><!--/$--></article><footer class="mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700"><div class="flex flex-col sm:flex-row sm:justify-between items-start sm:items-center text-sm text-gray-500 dark:text-gray-400 space-y-3 sm:space-y-0"><div><p>Last updated: <!-- -->9/12/2025</p></div><div><p>Part of Menttor Library</p></div></div></footer></main></div></div></div></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><script src="/_next/static/chunks/webpack-72ece0fd9a9f1a05.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/09dfadb69bdaa005.css\",\"style\"]\n2:HL[\"/_next/static/css/4ea63a6bcb618b80.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"3:I[12846,[],\"\"]\n6:I[4707,[],\"\"]\n8:I[36423,[],\"\"]\na:I[55319,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"ThemeProvider\"]\nb:I[20617,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\nc:I[33476,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"AuthProvider\"]\nd:I[41932,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"QueryClientProviderWrapper\"]\ne:I[31442,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3"])</script><script>self.__next_f.push([1,"464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"BehavioralProvider\"]\nf:I[78848,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n10:I[36279,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n11:I[6638,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n12:I[78678,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e653"])</script><script>self.__next_f.push([1,"6c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n13:I[67241,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n14:I[40221,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"default\"]\n15:I[49197,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"3574\",\"static/chunks/3574-5314b65c203ff122.js\",\"7549\",\"static/chunks/7549-3203ea2e3b513acc.js\",\"2466\",\"static/chunks/2466-b78a76e6536c5a53.js\",\"4928\",\"static/chunks/4928-76f152cad7e389e4.js\",\"1161\",\"static/chunks/1161-2e45fd763b5b39bc.js\",\"3185\",\"static/chunks/app/layout-c93973c26cf608c7.js\"],\"Analytics\"]\n17:I[61060,[],\"\"]\n7:[\"slug\",\"typing-form-elements-and-form-data\",\"d\"]\n9:T4ad,{\"@context\":\"https://schema.org\",\"@type\":\"EducationalOrganization\",\"name\":\"Menttor Labs\",\"url\":\"https://menttor.live\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://menttor.live/favicon_io_light/android-chrome-512x512.png\",\"width\":512,\"height\":512},\"description\":\"Smart learning platform offering free personalized roadmaps across diverse subjects including programming, business, science, languages, an"])</script><script>self.__next_f.push([1,"d professional skills\",\"sameAs\":[\"https://github.com/mountain-snatcher\"],\"offers\":{\"@type\":\"Offer\",\"price\":\"0\",\"priceCurrency\":\"USD\",\"category\":\"Educational Services\"},\"areaServed\":\"Worldwide\",\"hasOfferCatalog\":{\"@type\":\"OfferCatalog\",\"name\":\"Learning Courses\",\"itemListElement\":[{\"@type\":\"Course\",\"name\":\"Programming \u0026 Web Development\",\"description\":\"Learn Python, JavaScript, React, and full-stack development\"},{\"@type\":\"Course\",\"name\":\"Business \u0026 Professional Skills\",\"description\":\"Master leadership, project management, and business strategy\"},{\"@type\":\"Course\",\"name\":\"Science \u0026 Mathematics\",\"description\":\"Explore physics, chemistry, mathematics, and scientific methods\"},{\"@type\":\"Course\",\"name\":\"Language Learning\",\"description\":\"Master new languages with structured learning paths\"}]}}18:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L3\",null,{\"buildId\":\"build-1758106999520\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"library\",\"typing-form-elements-and-form-data\"],\"initialTree\":[\"\",{\"children\":[\"library\",{\"children\":[[\"slug\",\"typing-form-elements-and-form-data\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"library\",{\"children\":[[\"slug\",\"typing-form-elements-and-form-data\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L4\",\"$L5\",null],null],null]},[[null,[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-white\",\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"library\",\"children\",\"$7\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]}]],null],null]},[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"library\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/09dfadb69bdaa005.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/4ea63a6bcb618b80.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"shortcut icon\",\"href\":\"/favicon_io_light/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon_io_light/apple-touch-icon.png\"}],[\"$\",\"link\",null,{\"href\":\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700\u0026display=swap\",\"rel\":\"stylesheet\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Content-Security-Policy\",\"content\":\"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://www.google-analytics.com https://cdn.jsdelivr.net https://apis.google.com https://www.google.com https://www.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https: blob:; media-src 'self' blob:; object-src 'none'; frame-src 'self' https: https://www.google.com; connect-src 'self' https: wss:;\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"X-Content-Type-Options\",\"content\":\"nosniff\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"X-XSS-Protection\",\"content\":\"1; mode=block\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Referrer-Policy\",\"content\":\"strict-origin-when-cross-origin\"}],[\"$\",\"meta\",null,{\"httpEquiv\":\"Permissions-Policy\",\"content\":\"geolocation=(), microphone=(), camera=()\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.googleapis.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://fonts.gstatic.com\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.googletagmanager.com\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$9\"}}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-1YCW8BNWQX\"}],[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\\n              window.dataLayer = window.dataLayer || [];\\n              function gtag(){dataLayer.push(arguments);}\\n              gtag('js', new Date());\\n              gtag('config', 'G-1YCW8BNWQX', {\\n                page_title: document.title,\\n                page_location: window.location.href,\\n                anonymize_ip: true,\\n                allow_google_signals: false\\n              });\\n            \"}}]]}],[\"$\",\"body\",null,{\"className\":\"antialiased bg-white dark:bg-zinc-950\",\"children\":[\"$\",\"$La\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$Le\",null,{\"children\":[[\"$\",\"$Lf\",null,{}],[\"$\",\"$L10\",null,{}],[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{}],[\"$\",\"$L14\",null,{}],[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L8\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L15\",null,{}]]}]}]}]]}]}]]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L16\"],\"globalErrorComponent\":\"$17\",\"missingSlots\":\"$W18\"}]\n"])</script><script>self.__next_f.push([1,"19:I[85995,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"default\"]\n1a:I[72972,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"\"]\n1b:\"$Sreact.suspense\"\n1c:I[33270,[\"139\",\"static/chunks/69806262-fbefbcfb04aae72d.js\",\"3954\",\"static/chunks/d3ac728e-4c56e7f41db266b7.js\",\"8685\",\"static/chunks/8685-5f04637e798ba89b.js\",\"3464\",\"static/chunks/3464-841479b3032404e8.js\",\"7648\",\"static/chunks/7648-822bce31da635458.js\",\"8244\",\"static/chunks/8244-2b24e5c38848eaa4.js\",\"7199\",\"static/chunks/7199-193813bcd35f4770.js\",\"2708\",\"static/chunks/2708-3afe8f1a68627e46.js\",\"232\",\"static/chunks/app/library/%5Bslug%5D/page-3b740e052ef424c6.js\"],\"default\"]\n1d:T4f8,import React, { useState, ChangeEvent, FormEvent } from 'react';\n\ninterface UserProfile {\n  name: string;\n  email: string;\n}\n\nconst UserProfileForm: React.FC = () =\u003e {\n  const [profile, setProfile] = useState\u003cUserProfile\u003e({\n    name: '',\n    email: '',\n  });\n\n  const handleInputChange = (e: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n    const { name, value } = e.target;\n    setProfile(prevState =\u003e ({\n      ...prevState,\n      [name]: value,\n    }));\n  };\n\n  const handleSubmit = (e: FormEvent\u003cHTMLFormElement\u003e) =\u003e {\n    e.preventDefault();\n    console.log('User Profile Sub"])</script><script>self.__next_f.push([1,"mitted:', profile);\n    // Here you would typically send the profile data to an API\n  };\n\n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cdiv\u003e\n        \u003clabel htmlFor=\"name\"\u003eName:\u003c/label\u003e\n        \u003cinput\n          type=\"text\"\n          id=\"name\"\n          name=\"name\"\n          value={profile.name}\n          onChange={handleInputChange}\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003clabel htmlFor=\"email\"\u003eEmail:\u003c/label\u003e\n        \u003cinput\n          type=\"email\"\n          id=\"email\"\n          name=\"email\"\n          value={profile.email}\n          onChange={handleInputChange}\n        /\u003e\n      \u003c/div\u003e\n      \u003cbutton type=\"submit\"\u003eSave Profile\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n\nexport default UserProfileForm;"])</script><script>self.__next_f.push([1,"5:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-white\",\"children\":[[\"$\",\"header\",null,{\"className\":\"bg-white border-b border-gray-200 sticky top-0 z-50\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center h-14 sm:h-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4 sm:space-x-6\",\"children\":[[\"$\",\"$L19\",null,{\"variant\":\"dark\"}],[\"$\",\"nav\",null,{\"className\":\"hidden md:flex items-center space-x-1\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"/\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Home\"}]]}],[\"$\",\"$L1a\",null,{\"href\":\"/explore\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Explore\"}]]}],[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Library\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"md:hidden\",\"children\":[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors min-h-[44px]\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-left w-4 h-4\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1wnfg3\",{\"d\":\"m15 18-6-6 6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"children\":\"Library\"}]]}]}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-blue-200\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col space-y-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-2 text-sm text-blue-600\",\"children\":[[\"$\",\"$L1a\",null,{\"href\":\"/library\",\"className\":\"hover:text-blue-800 font-medium\",\"children\":\"Library\"}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-left w-4 h-4 rotate-180\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1wnfg3\",{\"d\":\"m15 18-6-6 6-6\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"text-blue-800\",\"children\":\"Typing form elements and form data\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl font-bold text-gray-900\",\"children\":\"Typing form elements and form data\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-700 text-sm max-w-3xl\",\"children\":\"Learn about Typing form elements and form data as part of TypeScript Full-Stack Development\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"lg:flex lg:gap-12\",\"children\":[[\"$\",\"aside\",null,{\"className\":\"hidden lg:block w-56 flex-shrink-0\",\"children\":[\"$\",\"div\",null,{\"className\":\"sticky top-24\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-sm font-semibold text-gray-900 mb-3\",\"children\":\"Contents\"}],[\"$\",\"nav\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"a\",\"0\",{\"href\":\"#heading-typing-form-elements-and-form-data-in-react-with-typescript\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 \",\"children\":\"Typing Form Elements and Form Data in React with TypeScript\"}],[\"$\",\"a\",\"1\",{\"href\":\"#heading-understanding-form-element-types\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Understanding Form Element Types\"}],[\"$\",\"a\",\"2\",{\"href\":\"#heading-typing-form-data-state\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Typing Form Data State\"}],[\"$\",\"a\",\"3\",{\"href\":\"#heading-handling-form-submissions-with-typed-data\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Handling Form Submissions with Typed Data\"}],[\"$\",\"a\",\"4\",{\"href\":\"#heading-example-a-simple-typed-form\",\"className\":\"block py-1 text-sm transition-colors border-l-2 border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50 pl-3\",\"children\":\"Example: A Simple Typed Form\"}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"lg:hidden mb-6\",\"children\":[\"$\",\"details\",null,{\"className\":\"bg-gray-50 rounded-lg p-4\",\"children\":[[\"$\",\"summary\",null,{\"className\":\"font-semibold text-gray-900 cursor-pointer flex items-center justify-between\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Table of Contents\"}],[\"$\",\"svg\",null,{\"className\":\"w-5 h-5 transform transition-transform\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M19 9l-7 7-7-7\"}]}]]}],[\"$\",\"nav\",null,{\"className\":\"mt-3 space-y-2\",\"children\":[[\"$\",\"a\",\"0\",{\"href\":\"#heading-typing-form-elements-and-form-data-in-react-with-typescript\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors font-medium text-gray-900 hover:bg-gray-100\",\"children\":\"Typing Form Elements and Form Data in React with TypeScript\"}],[\"$\",\"a\",\"1\",{\"href\":\"#heading-understanding-form-element-types\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Understanding Form Element Types\"}],[\"$\",\"a\",\"2\",{\"href\":\"#heading-typing-form-data-state\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Typing Form Data State\"}],[\"$\",\"a\",\"3\",{\"href\":\"#heading-handling-form-submissions-with-typed-data\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Handling Form Submissions with Typed Data\"}],[\"$\",\"a\",\"4\",{\"href\":\"#heading-example-a-simple-typed-form\",\"className\":\"block py-2 px-3 text-sm rounded transition-colors text-gray-700 pl-6 hover:bg-gray-100\",\"children\":\"Example: A Simple Typed Form\"}]]}]]}]}],[\"$\",\"main\",null,{\"className\":\"lg:flex-1 lg:min-w-0 w-full\",\"children\":[[\"$\",\"article\",null,{\"className\":\"prose prose-gray max-w-none lg:max-w-none\",\"children\":[\"$\",\"$1b\",null,{\"fallback\":[\"$\",\"div\",null,{\"children\":\"Loading...\"}],\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-6\",\"children\":[[[\"$\",\"div\",\"0\",{\"children\":[\"$\",\"h1\",null,{\"id\":\"heading-typing-form-elements-and-form-data-in-react-with-typescript\",\"className\":\"text-3xl font-bold mt-12 mb-6 text-gray-900\",\"children\":\"Typing Form Elements and Form Data in React with TypeScript\"}]}],[\"$\",\"div\",\"1\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Mastering form handling in React with TypeScript is crucial for building robust and type-safe frontend applications. This module focuses on how to correctly type your form elements and the data they manage, preventing common runtime errors and improving developer experience.\"}]}]}],[\"$\",\"div\",\"2\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-understanding-form-element-types\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Understanding Form Element Types\"}]}],[\"$\",\"div\",\"3\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"In React, form elements like \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003cinput\u003e\"}],\", \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003ctextarea\u003e\"}],\", and \",[\"$\",\"$L1c\",null,{\"language\":\"\",\"children\":\"\u003cselect\u003e\"}],\" are represented as HTML elements. When working with TypeScript, we need to provide the correct event types for handling user interactions, such as changes or submissions.\"]}]}]}],[\"$\",\"div\",\"4\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-6 border-b border-gray-200/50\",\"children\":[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-gray-900 flex items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-6 h-6 text-indigo-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}]}],\"Use `React.ChangeEvent` for input changes and `React.FormEvent` for form submissions.\"]}]}],[\"$\",\"div\",null,{\"className\":\"p-6 prose max-w-none text-gray-700\",\"children\":[\"$undefined\",[\"$\",\"p\",\"p-0\",{\"children\":[\"When an input field's value changes, it triggers an event. For these events, TypeScript uses \",[\"$\",\"code\",\"code-0\",{\"children\":\"React.ChangeEvent\u003cHTMLInputElement\u003e\"}],\" for input elements, \",[\"$\",\"code\",\"code-1\",{\"children\":\"React.ChangeEvent\u003cHTMLTextAreaElement\u003e\"}],\" for textareas, and \",[\"$\",\"code\",\"code-2\",{\"children\":\"React.ChangeEvent\u003cHTMLSelectElement\u003e\"}],\" for select elements. For form submission, \",[\"$\",\"code\",\"code-3\",{\"children\":\"React.FormEvent\u003cHTMLFormElement\u003e\"}],\" is the appropriate type.\"]}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down w-6 h-6 text-gray-400\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"px-6 pb-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"When an input field's value changes, it triggers an event. For these events, TypeScript uses specific event types that extend the generic \",[\"$\",\"code\",\"code-0\",{\"children\":\"React.ChangeEvent\"}],\". For standard \",[\"$\",\"code\",\"code-1\",{\"children\":\"\u003cinput\u003e\"}],\" elements, you'll use \",[\"$\",\"code\",\"code-2\",{\"children\":\"React.ChangeEvent\u003cHTMLInputElement\u003e\"}],\". For \",[\"$\",\"code\",\"code-3\",{\"children\":\"\u003ctextarea\u003e\"}],\" elements, it's \",[\"$\",\"code\",\"code-4\",{\"children\":\"React.ChangeEvent\u003cHTMLTextAreaElement\u003e\"}],\". For \",[\"$\",\"code\",\"code-5\",{\"children\":\"\u003cselect\u003e\"}],\" elements, the type is \",[\"$\",\"code\",\"code-6\",{\"children\":\"React.ChangeEvent\u003cHTMLSelectElement\u003e\"}],\". These types provide access to the \",[\"$\",\"code\",\"code-7\",{\"children\":\"target\"}],\" property, which is typed as the specific HTML element, allowing you to safely access properties like \",[\"$\",\"code\",\"code-8\",{\"children\":\"value\"}],\" and \",[\"$\",\"code\",\"code-9\",{\"children\":\"name\"}],\". When a form is submitted, the event type is \",[\"$\",\"code\",\"code-10\",{\"children\":\"React.FormEvent\u003cHTMLFormElement\u003e\"}],\", which gives you access to the form element itself and its associated data.\"]}]}]}]]}]}],[\"$\",\"div\",\"5\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"l5xja\",{\"d\":\"M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z\"}],[\"$\",\"path\",\"10igwf\",{\"d\":\"M9 13a4.5 4.5 0 0 0 3-4\"}],[\"$\",\"path\",\"105sqy\",{\"d\":\"M6.003 5.125A3 3 0 0 0 6.401 6.5\"}],[\"$\",\"path\",\"ql3yin\",{\"d\":\"M3.477 10.896a4 4 0 0 1 .585-.396\"}],[\"$\",\"path\",\"2e4loj\",{\"d\":\"M6 18a4 4 0 0 1-1.967-.516\"}],[\"$\",\"path\",\"1ku699\",{\"d\":\"M12 13h4\"}],[\"$\",\"path\",\"105ag5\",{\"d\":\"M12 18h6a2 2 0 0 1 2 2v1\"}],[\"$\",\"path\",\"1lhi5i\",{\"d\":\"M12 8h8\"}],[\"$\",\"path\",\"u6izg6\",{\"d\":\"M16 8V5a2 2 0 0 1 2-2\"}],[\"$\",\"circle\",\"ry7gng\",{\"cx\":\"16\",\"cy\":\"13\",\"r\":\".5\"}],[\"$\",\"circle\",\"1aiba7\",{\"cx\":\"18\",\"cy\":\"3\",\"r\":\".5\"}],[\"$\",\"circle\",\"yhc1fs\",{\"cx\":\"20\",\"cy\":\"21\",\"r\":\".5\"}],[\"$\",\"circle\",\"1e43v0\",{\"cx\":\"20\",\"cy\":\"8\",\"r\":\".5\"}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-xl font-medium text-indigo-900 prose prose-xl max-w-none\",\"children\":[\"$\",\"span\",null,{\"children\":[\"What TypeScript event type should be used for handling changes in a standard \",[\"$\",\"code\",\"code-0\",{\"children\":\"\u003cinput\u003e\"}],\" element within a React component?\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"React.ChangeEvent\",\"\u003cHTMLInputElement\u003e\"]}]}]]}]}],[\"$\",\"div\",\"6\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-typing-form-data-state\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Typing Form Data State\"}]}],[\"$\",\"div\",\"7\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Managing the state of your form data requires defining a clear structure. TypeScript interfaces or types are ideal for this, ensuring consistency and predictability.\"}]}]}],[\"$\",\"div\",\"8\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg overflow-hidden\",\"children\":[[\"$\",\"div\",null,{\"className\":\"p-6 border-b border-gray-200/50\",\"children\":[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold text-gray-900 flex items-center\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-12 h-12 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-book-open w-6 h-6 text-indigo-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"1akyts\",{\"d\":\"M12 7v14\"}],[\"$\",\"path\",\"ruj8y\",{\"d\":\"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z\"}],\"$undefined\"]}]}],\"Define an interface for your form data to ensure type safety.\"]}]}],[\"$\",\"div\",null,{\"className\":\"p-6 prose max-w-none text-gray-700\",\"children\":[\"$undefined\",[\"$\",\"p\",\"p-0\",{\"children\":\"Create an interface that mirrors the structure of your form's data. This interface will define the expected types for each form field, such as strings, numbers, or booleans.\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex justify-center py-3\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-down w-6 h-6 text-gray-400\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"qrunsl\",{\"d\":\"m6 9 6 6 6-6\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"px-6 pb-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"p-4 bg-gray-50/50 rounded-xl prose max-w-none text-gray-600\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"To maintain type safety for your form's data, it's best practice to define an interface or type that represents the shape of your form's state. For example, if you have a login form with fields for email and password, you might define an interface like this: \",[\"$\",\"code\",\"code-0\",{\"children\":\"interface LoginFormState { email: string; password: string; }\"}],\". This interface can then be used to type your component's state, ensuring that you always have the correct data types for each field. This approach helps catch errors early in the development process, as TypeScript will flag any discrepancies between your state and the defined interface.\"]}]}]}]]}]}],[\"$\",\"div\",\"9\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-handling-form-submissions-with-typed-data\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Handling Form Submissions with Typed Data\"}]}],[\"$\",\"div\",\"10\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"When a form is submitted, you'll want to process the data in a type-safe manner. This involves accessing the form data from the event and ensuring it conforms to your defined types.\"}]}]}],[\"$\",\"div\",\"11\",{\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col lg:flex-row gap-6 my-8 border-l-4 border-blue-500 pl-6 bg-gray-50 py-6 pr-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 prose max-w-none text-gray-800\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"When handling form submissions, you'll typically prevent the default browser behavior and then access the form data. The \",[\"$\",\"code\",\"code-0\",{\"children\":\"event.currentTarget\"}],\" property of a \",[\"$\",\"code\",\"code-1\",{\"children\":\"React.FormEvent\"}],\" will be typed as \",[\"$\",\"code\",\"code-2\",{\"children\":\"HTMLFormElement\"}],\", allowing you to access its elements. A common pattern is to iterate over the form elements or use \",[\"$\",\"code\",\"code-3\",{\"children\":\"FormData\"}],\" to collect the values. Ensuring these values are correctly parsed and assigned to your typed state is key. For instance, if a number input is expected, you might need to parse the string value to a number.\"]}]}],[\"$\",\"div\",null,{\"className\":\"flex-1 w-full lg:w-auto\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-center justify-center bg-gray-100 border border-gray-200 rounded-lg p-8 w-full h-48\",\"children\":[\"$\",\"div\",null,{\"className\":\"text-center text-gray-500\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-2xl mb-2\",\"children\":\"📚\"}],[\"$\",\"p\",null,{\"className\":\"text-sm\",\"children\":\"Text-based content\"}],[\"$\",\"p\",null,{\"className\":\"text-xs text-gray-400\",\"children\":\"Library pages focus on text content\"}]]}]}]}]]}]}],[\"$\",\"div\",\"12\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 p-6 rounded-2xl border-l-4 shadow-lg bg-blue-50 border-blue-400 text-blue-800\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex items-start\",\"children\":[[\"$\",\"div\",null,{\"className\":\"w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mr-4 flex-shrink-0\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-git-compare-arrows w-6 h-6 text-blue-600\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"circle\",\"1qnov2\",{\"cx\":\"5\",\"cy\":\"6\",\"r\":\"3\"}],[\"$\",\"path\",\"1yj91y\",{\"d\":\"M12 6h5a2 2 0 0 1 2 2v7\"}],[\"$\",\"path\",\"1lwv8l\",{\"d\":\"m15 9-3-3 3-3\"}],[\"$\",\"circle\",\"1qljk2\",{\"cx\":\"19\",\"cy\":\"18\",\"r\":\"3\"}],[\"$\",\"path\",\"16sdep\",{\"d\":\"M12 18H7a2 2 0 0 1-2-2V9\"}],[\"$\",\"path\",\"1m3kbl\",{\"d\":\"m9 15 3 3-3 3\"}],\"$undefined\"]}]}],[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-current\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":[\"Consider using libraries like \",[\"$\",\"code\",\"code-0\",{\"children\":\"react-hook-form\"}],\" or \",[\"$\",\"code\",\"code-1\",{\"children\":\"formik\"}],\" which abstract away much of the boilerplate for form handling and integrate seamlessly with TypeScript.\"]}]}]]}]}]}],[\"$\",\"div\",\"13\",{\"children\":[\"$\",\"h2\",null,{\"id\":\"heading-example-a-simple-typed-form\",\"className\":\"text-2xl font-semibold mt-8 mb-4 text-gray-900\",\"children\":\"Example: A Simple Typed Form\"}]}],[\"$\",\"div\",\"14\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"Let's look at a basic example of a typed form component in React with TypeScript.\"}]}]}],[\"$\",\"div\",\"15\",{\"children\":[\"$\",\"div\",null,{\"className\":\"prose max-w-none text-gray-800 leading-relaxed my-4\",\"children\":[\"$\",\"$L1c\",null,{\"language\":\"typescript\",\"children\":\"$1d\"}]}]}],[\"$\",\"div\",\"16\",{\"children\":[\"$\",\"div\",null,{\"className\":\"my-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-gray-200/50 shadow-lg p-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start bg-indigo-50 px-4 py-3 rounded-xl mb-4\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-brain-circuit h-6 w-6 mr-3 text-indigo-600 mt-1 flex-shrink-0\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"path\",\"l5xja\",{\"d\":\"M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z\"}],[\"$\",\"path\",\"10igwf\",{\"d\":\"M9 13a4.5 4.5 0 0 0 3-4\"}],[\"$\",\"path\",\"105sqy\",{\"d\":\"M6.003 5.125A3 3 0 0 0 6.401 6.5\"}],[\"$\",\"path\",\"ql3yin\",{\"d\":\"M3.477 10.896a4 4 0 0 1 .585-.396\"}],[\"$\",\"path\",\"2e4loj\",{\"d\":\"M6 18a4 4 0 0 1-1.967-.516\"}],[\"$\",\"path\",\"1ku699\",{\"d\":\"M12 13h4\"}],[\"$\",\"path\",\"105ag5\",{\"d\":\"M12 18h6a2 2 0 0 1 2 2v1\"}],[\"$\",\"path\",\"1lhi5i\",{\"d\":\"M12 8h8\"}],[\"$\",\"path\",\"u6izg6\",{\"d\":\"M16 8V5a2 2 0 0 1 2-2\"}],[\"$\",\"circle\",\"ry7gng\",{\"cx\":\"16\",\"cy\":\"13\",\"r\":\".5\"}],[\"$\",\"circle\",\"1aiba7\",{\"cx\":\"18\",\"cy\":\"3\",\"r\":\".5\"}],[\"$\",\"circle\",\"yhc1fs\",{\"cx\":\"20\",\"cy\":\"21\",\"r\":\".5\"}],[\"$\",\"circle\",\"1e43v0\",{\"cx\":\"20\",\"cy\":\"8\",\"r\":\".5\"}],\"$undefined\"]}],[\"$\",\"div\",null,{\"className\":\"text-xl font-medium text-indigo-900 prose prose-xl max-w-none\",\"children\":[\"$\",\"span\",null,{\"children\":[\"In the example, what is the purpose of the \",[\"$\",\"code\",\"code-0\",{\"children\":\"UserProfile\"}],\" interface?\"]}]}]]}],[\"$\",\"div\",null,{\"className\":\"px-4 pt-4 pb-2 text-gray-700 prose max-w-none bg-gray-50/50 rounded-xl\",\"children\":[\"$\",\"p\",\"p-0\",{\"children\":\"It defines the expected structure and types for the form's state data (name and email).\"}]}]]}]}]],[\"$\",\"div\",null,{\"className\":\"mt-12 pt-8 border-t border-gray-200\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-bold text-gray-900 mb-6\",\"children\":\"Learning Resources\"}],[\"$\",\"div\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"div\",\"0\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.typescriptlang.org/docs/handbook/react/forms.html\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"TypeScript Official Documentation: Forms\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"The official TypeScript documentation provides in-depth guidance on handling forms within React applications, covering event types and state management.\"}]]}],[\"$\",\"div\",\"1\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://react.dev/reference/react-dom/components/form\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Documentation: Forms\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"The official React documentation explains how to manage form state and handle user input, which is foundational for applying TypeScript types.\"}]]}],[\"$\",\"div\",\"2\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://react-hook-form.com/typescript\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"React Hook Form: TypeScript Examples\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"This resource offers practical examples and best practices for using React Hook Form with TypeScript, a popular library for efficient form handling.\"}]]}],[\"$\",\"div\",\"3\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://formik.org/docs/guides/typescript\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Formik: TypeScript Guide\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"Learn how to integrate Formik, another powerful form management library, with TypeScript for robust form validation and submission.\"}]]}],[\"$\",\"div\",\"4\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://blog.logrocket.com/react-typescript-event-handling/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Understanding React Event Handling with TypeScript\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"blog\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A blog post detailing how to correctly type event handlers in React components using TypeScript, with clear explanations and code snippets.\"}]]}],[\"$\",\"div\",\"5\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.freecodecamp.org/news/typing-form-state-in-react-with-typescript/\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Typing Form State in React with TypeScript\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"blog\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"This article breaks down the process of defining types for form state in React, making your form data management more predictable.\"}]]}],[\"$\",\"div\",\"6\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/watch?v=z20f24_j1_s\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"Advanced React Form Handling with TypeScript\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"video\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"A video tutorial that dives into advanced techniques for handling forms in React with TypeScript, including validation and submission patterns.\"}]]}],[\"$\",\"div\",\"7\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://www.youtube.com/watch?v=5_3f8_8y9-g\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"TypeScript Generics in React\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"video\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"Understanding TypeScript generics is key to typing React components effectively, including form elements and their events.\"}]]}],[\"$\",\"div\",\"8\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"MDN Web Docs: HTMLFormElement\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"Reference for the HTMLFormElement interface, providing details on its properties and methods, useful for understanding the `currentTarget` in form events.\"}]]}],[\"$\",\"div\",\"9\",{\"children\":[[\"$\",\"a\",null,{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-blue-600 hover:text-blue-800 font-medium\",\"children\":\"MDN Web Docs: EventTarget\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-500 text-sm ml-2\",\"children\":[\"(\",\"documentation\",\")\"]}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-600 mt-1 ml-0\",\"children\":\"Information on the EventTarget interface, the base interface for all event objects in the DOM, which helps in understanding event propagation and properties.\"}]]}]]}]]}]]}]}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 sm:mt-12 pt-6 sm:pt-8 border-t border-gray-200 dark:border-gray-700\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col sm:flex-row sm:justify-between items-start sm:items-center text-sm text-gray-500 dark:text-gray-400 space-y-3 sm:space-y-0\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"p\",null,{\"children\":[\"Last updated: \",\"9/12/2025\"]}]}],[\"$\",\"div\",null,{\"children\":[\"$\",\"p\",null,{\"children\":\"Part of Menttor Library\"}]}]]}]}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Typing form elements and form data - Menttor Library | Menttor - Smart Learning Platform\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Learn about Typing form elements and form data as part of TypeScript Full-Stack Development\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"MenttorLabs\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"Typing form elements and form data, Programming Languages - React with TypeScript - Frontend Development, learning, education, menttor\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Menttor Labs\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Menttor Labs\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"11\",{\"rel\":\"canonical\",\"href\":\"https://menttor.live\"}],[\"$\",\"meta\",\"12\",{\"name\":\"format-detection\",\"content\":\"telephone=no, address=no, email=no\"}],[\"$\",\"meta\",\"13\",{\"name\":\"google-site-verification\",\"content\":\"bwivA76TNvzcdQVasoFFwoZZfGA1PycT2g1CJTAW8Gw\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:title\",\"content\":\"Typing form elements and form data - Menttor Library\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:description\",\"content\":\"Learn about Typing form elements and form data as part of TypeScript Full-Stack Development\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:url\",\"content\":\"https://menttor.live/library/typing-form-elements-and-form-data\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:site_name\",\"content\":\"Menttor\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image\",\"content\":\"https://menttor.live/og-image.png\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Typing form elements and form data - Menttor Library\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"Learn about Typing form elements and form data as part of TypeScript Full-Stack Development\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://menttor.live/og-image.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon_io_light/favicon.ico\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"29\",{\"rel\":\"icon\",\"href\":\"/favicon_io_light/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"apple-touch-icon\",\"href\":\"/favicon_io_light/apple-touch-icon.png\"}]]\n"])</script><script>self.__next_f.push([1,"4:null\n"])</script></body></html>