🎉 Unlocking the Power of TypeScript with Easy and Simple React or Nextjs Forms!
Are you tired of handling form submissions in React with simple code? Say goodbye to manual form field extraction and embrace the elegance of TypeScript! 💻⚡️
With TypeScript's event type, I have included code for you.
🛠️ Example: Let's take a look at how easy it is to handle form submissions in React with TypeScript:
Now use for 🔍 Easy Accessing Form Data:
🔗 #ReactForms #TypeScript #DeveloperExperience #StreamlinedDevelopment #TypeSafety
Sarwar #full-stack-developer
Direct code for public and open
import React, { BaseSyntheticEvent } from 'react'
export default function SignUpForm() {
const submitHandler = async (e: BaseSyntheticEvent<Event, EventTarget & HTMLFormElement>) => {
e.preventDefault();
const values = Object.fromEntries(new FormData(e.target))
console.log('Form values:', values);
////! console Form values: { username: 'sarwarasik@gmail.com', password: '123456' }
};
return (
<form onSubmit={submitHandler}>
<div>
<label htmlFor="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label htmlFor="password">Password:</label>
<input type="password" id="password" name="password" />
</div>
<button type="submit">Submit</button>
</form>
);
}
see console
console Form values: { username: 'sarwarasik@gmail.com', password: '123456' }
Top comments (0)