import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
function ProductScreen({ match }) {
const product = products.find((p) => p._id === match.params.id)
return (
<div>
<Link to='/' className='btn btn-light my-3'>Go Back</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush">
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating>
</ListGroup.Item>
<ListGroup.Item>
Price: ₹{product.price}
</ListGroup.Item>
<ListGroup.Item>
Description: {product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<Row>
<Col>Price:</Col>
<Col>
<strong>{product.price}</strong>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Status:</Col>
<Col>
{product.countInStok > 0 ? 'In Stock' : 'Out of Stock'}
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Button className='btn-block' type='button'> add to Cart </Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
</div>
);
}
export default ProductScreen
As pointed in comment, your products variable has value undefined, hence your code fails.
Its always recommended and good practice to guard your code and avoid failures. There are multiple ways to guard yourself from these sitations. Optional chaining operator, or logical &&.
So you could use something like:
return products && <div>...</div>; or for some cases you would like to show loader if you fetch data:
return !products ? 'Loading...' : <div>...</div;. Or you can use products?.myProp1 on every place where your products variable appear. It can be cumbersome to repeat the same stuff and maybe you wish to guard/handle it differently.
product is undefined so you can't read any properties of it. to prevent happening error check the value of it before render:
if(!product)
return <></>
return (
<div>
<Link to='/' className='btn btn-light my-3'>Go Back</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush">
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating>
</ListGroup.Item>
<ListGroup.Item>
Price: ₹{product.price}
</ListGroup.Item>
<ListGroup.Item>
Description: {product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<Row>
<Col>Price:</Col>
<Col>
<strong>{product.price}</strong>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Status:</Col>
<Col>
{product.countInStok > 0 ? 'In Stock' : 'Out of Stock'}
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Button className='btn-block' type='button'> add to Cart </Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
</div>);