DEV Community

Cover image for Easy access form value in Nextjs/React with TS
Sarwar Hossain
Sarwar Hossain

Posted on

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:

Image description

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>
    );
}


Enter fullscreen mode Exit fullscreen mode

see console



console  Form values:  { username: 'sarwarasik@gmail.com', password: '123456' }


Enter fullscreen mode Exit fullscreen mode

Top comments (0)