Implement a React form with validation that submits data to an API endpoint on form submission.

Question

Aryan Kumar · Answer

Sure, here is the code for a React form with validation that submits data to an API endpoint on form submission:
JavaScript
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import axios from "axios";
const Form = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });
  const {
    formState: { errors },
    handleSubmit,
  } = useForm();
  const onSubmit = async (data) => {
    try {
      const response = await axios.post("https://api.example.com/users", data);
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    andlt;form onSubmit={handleSubmit(onSubmit)}>
      andlt;input
        type="text"
        placeholder="Name"
        name="name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      andlt;input
        type="email"
        placeholder="Email"
        name="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />
      andlt;button type="submit">Submitandlt;/button>
    andlt;/form>
  );
};
export default Form;
This code uses the react-hook-form library to handle form validation and submission. The
useForm hook provides a set of methods for registering form fields, validating input, and submitting the form. The
errors object from the formState property contains an object of errors for each form field. The
handleSubmit function is called when the form is submitted and takes a callback function as an argument. This callback function is called after the form has been validated and the data has been submitted to the API endpoint.
The onSubmit function is a simple example of how to submit the form data to an API endpoint. In a real-world application, you would need to customize this function to send the data to the appropriate endpoint and handle any errors that might occur.
To run this code, you can create a new React project and install the react-hook-form and
axios packages. Then, you can copy and paste the code above into a file called
Form.js. Finally, you can start the React development server and view the form in your browser.

forum

Implement a React form with validation that submits data to an API endpoint on form submission.

Steilla Mitchel

Can you answer this question?

1 Answers

Liked By