Untitled

import React, { useEffect, useState } from 'react';
import Feedback from 'react-bootstrap/esm/Feedback';
import { useParams } from 'react-router-dom';
import './InventoryDetels.css';


const InventoryDetels = () => {
    const [product,setProduct]=useState([]);
    const {id}=useParams();

    async function getAndUpdateProduct(id){
        return fetch(`https://afternoon-shelf-86767.herokuapp.com/product/${id}`)
        .then(res=>res.json())
        .then(data=>setProduct(data))
    }

    useEffect(async ()=>{
      await getAndUpdateProduct(id)
    },[id]);


    // const [inventory,setInventory]=useState({})
      
      const result=product.find(pro=>pro._id ===id);
        // setInventory(result)
        // console.log(inventory);
      const deliverd=()=>{
        fetch(`https://afternoon-shelf-86767.herokuapp.com/product/reduce/${id}`)
        .then(res=>res.json())
        .then(data=>
            await getAndUpdateProduct(id)
            )
      }
         
     
    return (
        <div>
            <h1 className='text-center p-5'>Product Deteles</h1>
            <div className='eachitem inventory-ubdate mx-auto'>
            <div className='img'>
                <img src={result?.picture} alt="img" />
            </div>
            <div className='each-deteles '>
                <h3>Name :{result?.name}</h3>
                <h4>Price :{result?.price}</h4>
                <h4> Supliyar :{result?.supliyer}</h4>
                <h4>Quattity :{result?.quantity}</h4>
                <p> Description :{result?.description}</p>
                <button onClick={deliverd}> delivered</button>
            </div>
            
           
            
        </div>
            
        </div>
    );
};

export default InventoryDetels;