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;
you need to add ToastContainer to your component then simply use toast function like this :
toast.success('YOUR MESSAGE',{TOAST CONFIG})
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;