How to give a toast message, when user add an item?

Question

import React from 'react';
import { useForm } from "react-hook-form";
import { toast } from 'react-toastify';

const AddStorage = () => {
    const { register, handleSubmit } = useForm();

    const onSubmit = data => {
        console.log(data);
        const url = `https://desolate-springs-82685.herokuapp.com/storage`;
        fetch(url, {
            method: 'POST',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(res => res.json())
            .then(result => {
                console.log(result);
                 toast('Congrats! You added an order');
            })
    };

    return (
        <div className='w-50 mx-auto mb-5 mt-5 pb-5 pt-5'>
            <h2 className='text-center mb-4' >Please add a Storage</h2>
            <form className='d-flex flex-column' onSubmit={handleSubmit(onSubmit)}>
                <input className='mb-2' placeholder='Photo URL' type="text" {...register("img")} />
                <input className='mb-2' placeholder='Name' {...register("name", { required: true, maxLength: 20 })} />
                <input className='mb-2' placeholder='Capacity' type="number and text" {...register("capacity")} />
                <textarea className='mb-3' placeholder='Description' {...register("description")} />
                <input className='btn-success mb-4' type="submit" value="Add Storage" />
            </form>
        </div>
    );
};

export default AddStorage;

Answer 1

First you need to import ToastContainer from the package library like this

import { ToastContainer, toast } from 'react-toastify';

Read more about usage of ToastContainer component in the link

ToastContainer is a container , where you want to show your error message , how to use it

import * as React from 'react';
import { ToastContainer, toast } from 'react-toastify';

const Articles = () => {
    const markAsHome = () => {
        toast.success(`Article successfuly defined as a recent article` );
    }
    return (
        <>
            <ToastContainer />
            <button onClick={markAsHome}> Mark As Home </button>
        </>
    );
}

export default Articles;

Answer 2

you need to add ToastContainer to your component then simply use toast function like this :

toast.success('YOUR MESSAGE',{TOAST CONFIG})