forum

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

Ask Question

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

Steilla Mitchel12726-Jul-2023

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

javascriptform validation reactjs  
Updated on 27-Jul-2023
Steilla Mitchel

Steilla Mitchel

Follow
I completed my post-graduation in 2013 in the engineering field. Engineering is the application of science and math to solve problems. Engineers figure out how things work and find practical uses for scientific discoveries. Scientists and inventors often get the credit for innovations that advance the human condition, but it is engineers who are instrumental in making those innovations available to the world. I love pet animals such as dogs, cats, etc.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

27-Jul-2023

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 (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        placeholder="Name"
        name="name"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      <input
        type="email"
        placeholder="Email"
        name="email"
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
      />
      <button type="submit">Submit</button>
    </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.

MindStick Training

Liked By