Breaking News: Grepper is joining You.com. Read the official announcement!

Form submission in react js using typescript

Vishnu answered on June 25, 2023 Popularity 8/10 Helpfulness 10/10

answer Form submission in react js using typescript

Form submission in react js using typescript

Comment

import React, { useState } from 'react';

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
}

const MyForm: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    firstName: '',
    lastName: '',
    email: '',
  });

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // Perform any validation or data manipulation
    // ...

    // Make an API request or perform any necessary actions with the form data
    console.log(formData);

    // Reset the form fields
    setFormData({ firstName: '', lastName: '', email: '' });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          First Name:
          <input
            type="text"
            name="firstName"
            value={formData.firstName}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <div>
        <label>
          Last Name:
          <input
            type="text"
            name="lastName"
            value={formData.lastName}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Popularity 8/10 Helpfulness 10/10 Language javascript

Source: chat.openai.com

Tags: javascript submission typescript using

Link to this answer
Share Copy Link

Contributed on Jun 25 2023

Vishnu

0 Answers Avg Quality 2/10

Form submission in react js using typescript

Contents

More Related Answers

Form submission in react js using typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.