import React from 'react';import { useForm } from "react-hook-form"; import {brindis} de 'react-toastify';
const AddStorage = () => { const { registro, 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> );};
exportar AddStorage predeterminado;
necesita agregar ToastContainer a su componente y luego simplemente usar la función de toast como esta:
toast.success('YOUR MESSAGE',{TOAST CONFIG})Primero debe importar ToastContainer de la biblioteca de paquetes de esta manera
import { ToastContainer, toast } from 'react-toastify';Lea más sobre el uso del componente ToastContainer en el enlace
ToastContainer es un contenedor, donde desea mostrar su mensaje de error, cómo usarlo
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;