Easy access form value in Nextjs/React with TS

🎉 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: '[e-mail]', 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: '[e-mail]', password: '123456' }