{"size": 1139, "ext": "js", "max_stars_repo_path": "src/components/ProductItem.js", "max_stars_repo_name": "adityatandon007/react-redux-shopping-cart-app", "max_stars_repo_stars_event_min_datetime": "2020-07-07T11:15:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-29T18:52:14.000Z", "max_issues_repo_path": "src/components/ProductItem.js", "max_issues_repo_name": "adityatandon007/React-Redux-Shopping-Cart-app", "max_issues_repo_issues_event_min_datetime": "2019-07-30T14:37:17.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T15:56:54.000Z", "max_forks_repo_path": "src/components/ProductItem.js", "max_forks_repo_name": "adityatandon007/React-Redux-Shopping-Cart-app", "max_forks_repo_forks_event_min_datetime": "2020-03-06T17:53:02.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-14T13:40:20.000Z"}
{"max_stars_count": 3, "max_issues_count": 8, "max_forks_count": 2, "avg_line_length": 35.59375, "max_line_length": 131, "alphanum_fraction": 0.5021949078}
import React,{ Component} from 'react';
import { Link } from 'react-router-dom';


export default class ProductItem extends Component{

    createLink(id){
        return '/product/'+id;
    }

    render(){

        return(
            <div className="card p-0 float-left">
                <Link to={this.createLink(this.props.product.id)}>
                <img width='250px' height='250px' className="card-img-top"
                    src={this.props.product.image} alt={this.props.product.title} 
                />
                </Link>
                <div className="card-body">
                    <div>
                        <p className='text-left'>₹{this.props.product.price}</p>
                    </div>
                    <Link to={this.createLink(this.props.product.id)} className="no-underline">
                        <h6 className="card-title product-title mt-1">{this.props.product.title}</h6>
                    </Link>
                    <div className="card-text"><small className="text-muted"><p> Brand:{this.props.product.brand}</p></small></div>
                </div>
            </div>
        );
    }
}