{"size": 936, "ext": "js", "max_stars_repo_path": "use-my-tech-stuff/src/components/ProductCard.js", "max_stars_repo_name": "BuildWeek-use-my-tech-stuff/Front-end-UMTS", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "use-my-tech-stuff/src/components/ProductCard.js", "max_issues_repo_name": "BuildWeek-use-my-tech-stuff/Front-end-UMTS", "max_issues_repo_issues_event_min_datetime": "2019-10-24T22:51:07.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T19:15:06.000Z", "max_forks_repo_path": "use-my-tech-stuff/src/components/ProductCard.js", "max_forks_repo_name": "BuildWeek-use-my-tech-stuff/Front-end-UMTS", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 30, "max_forks_count": null, "avg_line_length": 22.2857142857, "max_line_length": 56, "alphanum_fraction": 0.5106837607}
import React,{useState, useEffect} from 'react'
import axiosWithAuth from '../utils/axiosWithAuth';
import Header from './Header';
import Footer from './Footer';

const ProductCard = ({match}) => {

    const [item, setItem]= useState ({
        price: '',
        item_name: '',
        description: '',
    })

    useEffect(() => {

        axiosWithAuth().get(`/items/${match.params.id}`)
        .then( res => {
            setItem(res.data)
            console.log(res.data)
        })
        .catch( err=> console.log(err));

    }, [match.params.id])

    return (
    <div className='productContainer'>
        <Header />

        <div className='productCard'>
            <h1>{item.item_name}</h1>
            <img src=''></img>
            <p>{item.description}</p>
            <p>${item.price}</p>
            <button>Delete</button>
        </div>
        
        <Footer />
    </div>
    )
}

export default ProductCard