---
title: "Implement a React form with validation that submits data to an API endpoint on form submission."  
description: "Implement a React form with validation that submits data to an API endpoint on form submission."  
author: "Steilla Mitchel"  
published: 2023-07-26  
updated: 2023-07-27  
canonical: https://www.mindstick.com/forum/159302/implement-a-react-form-with-validation-that-submits-data-to-an-api-endpoint-on-form-submission  
category: "javascript"  
tags: ["form validation", "reactjs"]  
reading_time: 2 minutes  

---

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

Implement a [React](https://www.mindstick.com/articles/327892/react-why-it-just-makes-sense-for-web-development) [form with validation](https://www.mindstick.com/forum/160666/how-do-you-create-a-form-with-validation-in-knockout-js) that submits [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) to an [API](https://www.mindstick.com/articles/12641/instagram-api-upgraded-to-facebook-graph) [endpoint](https://www.mindstick.com/interview/964/what-is-metadata-exchange-mex-endpoint) on form submission.

## Replies

### Reply by Aryan Kumar

Sure, here is the code for a React [form](https://www.mindstick.com/forum/6/multi-form-mfc-application) with [validation](https://www.mindstick.com/articles/12234/validation-using-data-annotation-using-entity-framework) that submits data to an API endpoint on form submission:

JavaScript

```plaintext
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.


---

Original Source: https://www.mindstick.com/forum/159302/implement-a-react-form-with-validation-that-submits-data-to-an-api-endpoint-on-form-submission

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.