React-contact-form.js

import React from 'react';
import { useForm } from "react-hook-form";
import {yupResolver} from "@hookform/resolvers/yup";
import * as yup from 'yup';
import {Button, Col, Container, Form, Row} from "react-bootstrap";
import RestClient from "../RestAPI/RestClient";
import AppUrl from "../RestAPI/AppUrl";


const schema = yup.object().shape({
    name:yup.string().required(),
    email:yup.string().email().required(),
    message:yup.string().min(20).max(350).required(),
});

const ContactPageContent = () => {
    const {register, handleSubmit,  formState: { errors } } = useForm({
        resolver: yupResolver(schema),
    })
    const sendFormData = (data) =>{
        RestClient.ContactPostRequest(AppUrl.sendContactFormData, JSON.stringify(data)).then(result=>{
            reset();
            return alert("Success")
        }).catch(error=>{
            return "Error"
        })
    }
    return (
        <Container className="pt-5 ContactPageContentWrap">
            <Row>
                <Col lg={6} md={12} xs={12}>
                    <h3>Send Us Message</h3>
                    <Form onClick={handleSubmit(sendFormData)}>
                        <Form.Group className="mb-3">
                            <Form.Control {...register('name')}  id="name" type="text" name="name" placeholder="Name" />
                            <p className="text-danger"> {errors.name?.message} </p>
                        </Form.Group>

                        <Form.Group className="mb-3">
                            <Form.Control {...register('email')} id="contactEmail" type="email" name="email" placeholder="Email" />
                            <p className="text-danger"> {errors.email?.message} </p>
                        </Form.Group>
                        <Form.Group className="mb-3">
                            <Form.Control {...register('message')} id="contactMessage" as="textarea" name="message" rows={3} placeholder="Message" />
                            <p className="text-danger"> {errors.message?.message} </p>
                        </Form.Group>
                        <Button type="submit" variant="primary">
                            Submit
                        </Button>
<button type="button" onClick={() => reset({  })}>Reset</button>
                    </Form>
                </Col>
                <Col lg={6} md={12} xs={12} className="ContactPageRightColWrap">

                </Col>
            </Row>
        </Container>
    );
};

export default ContactPageContent;