Displaying a Success Message on form submission with react-hook-form using hooks

Question

I have a form that does the error validation correctly but having trouble trying to show a success message if everything is filled out and submits. I'm using the react-hook-form package and couldn't find anything in the docs.

I've create the errorMessage that's just a switch using react-hook-form doc tips

import React from "react";
import { useForm } from "react-hook-form";
import ErrorMessage from "./errorMessage";
import CustomButton from "../../../commons/custom-button/custom-button.component";



function JobAlertWidget() {
const {
register,
handleSubmit,
errors,
formState: { isSubmitting },
reset,
} = useForm();
const onSubmit = (data) => {
console.log(JSON.stringify(data));
reset();
};

return (
 <div className="job-alert-container">
  <form class="job-alert-form" onSubmit={handleSubmit(onSubmit)}>
    <p className="form-title">{title}</p>
    <div className="inner-container">
      <p className="first_content">{first_content}</p>
      <p className="second_content">{second_content}</p>
      <div className="inputs">
        <input
          type="text"
          name="firstName"
          className="firstName"
          placeholder="First Name"
          ref={register({ required: true, minLength: 2 })}
        />
        <ErrorMessage error={errors.firstName} />
        <input
          type="text"
          className="lastName"
          name="lastName"
          placeholder="Last Name"
          ref={register({ required: true, minLength: 2 })}
        />
        <ErrorMessage error={errors.firstName} />
        <input
          type="email"
          name="email"
          className="email"
          placeholder="Email Address"
          ref={register({ required: true, pattern: /^\S+@\S+$/i })}
        />
        <ErrorMessage error={errors.email} />
        <input
          type="number"
          name="phone"
          className="phone"
          placeholder="Mobile Phone"
          ref={register({ required: true })}
        />
        <ErrorMessage error={errors.phone} />
      </div>
    </div>
    <div className="link">
      <CustomButton className="heroLink" disabled={isSubmitting}>
        {link}
      </CustomButton>
    </div>
  </form>
</div>
);
}

export default JobAlertWidget;

Answer 1

A little bit late. But if you want to show an error message from react-hook-form, you have to specify it like this: errors.phone.message

Answer 2

• you can use react toastify installation

import { toast } from 'react-toastify';

Solution:

Now you need to check console.log(result);

• if you have something (insertedId) like me, apply condition. that's it.

• thanks.

const { register, handleSubmit, reset } = useForm();

  const onSubmit = data => {
    const url = `https://wmw-hiking-gear.herokuapp.com/stock`;
    fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(res => res.json())
      .then(result => {
        console.log(result);
        if (result.insertedId) {
          toast('Congress!!! Your have added a new item.');
          reset();
        }
      });

Answer 3

Hi if you want to show message then you can use following example that may help you to show message.

import React, {useState} from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackbarExample() {
    const [state, setState] = useState({
        open: false,
        vertical: 'top',
        horizontal: 'center',
    });

    const {vertical, horizontal, open} = state;

    const handleClick = (newState) => () => {
        setState({open: true, ...newState});
    };

    const handleClose = () => {
        setState({...state, open: false});
    };

    return (
        <div>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'center'})}>Top-Center</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'right'})}>Top-Right</Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'right'})}>
                Bottom-Right
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'center'})}>
                Bottom-Center
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'left'})}>Bottom-Left</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'left'})}>Top-Left</Button>
            <Snackbar
                anchorOrigin={{vertical, horizontal}}
                key={`${vertical},${horizontal}`}
                open={open}
                onClose={handleClose}
                message="This is the message"
            />
        </div>
    );
}