Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Implement a React form with validation that submits data to an API endpoint on form submission. – MindStick
Ask Question

1 Answers

Aryan Kumar
Aryan Kumar 27 Jul 2023
Report Abuse

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
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md