0
votes
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;

Do you already have a Toast component in your codebase? from NPM or of your own-making? - vsync