import React from 'react'; import useLoadFurnitures from '../../hooks/useLoadFurnitures'; const ManageInventory = ({furniture}) => { const { _id, name, img, des, price, quantity, supplier } = furniture; const [furnitures, setFurnitures] = useLoadFurnitures(); const handelDelete = (id) => { const proceed = window.confirm('Are you sure you want to delete?'); if (proceed) { const url = `http://localhost:5000//furnitures/${id}`; console.log(url); fetch(url, { method: 'DELETE' }) .then(res => res.json()) .then(data => { console.log(data); alert('Successfully deleted furniture'); const restFurniture = furnitures.filter(furniture._id !== id); setFurnitures(restFurniture); }) } } return ( <div className='mb-4'> <div className='img-container border p-4 rounded-lg'> <img className='w-full' src={img} alt="" /> <h4 className='text-center mt-2 text-xl font-bold'>{name}</h4> <h4 className='text-center '>{des}</h4> <h4 className='text-center font-bold'>Price: $ {price}</h4> <h4 className='text-center font-bold'>Quantity: {quantity}</h4> <h4 className='text-center font-bold'>Supplier: {supplier}</h4> <div className='flex justify-center'> <button onClick={()=>handelDelete(furniture._id) } className='bg-[red] px-2 py-1 mt-4 mr-2 text-white font-bold'>Delete</button> </div> </div> </div> ); }; export default ManageInventory;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>