I am developing an eCommerce Site in React.js and I am having "TypeError: Cannot read property 'Item' of undefined" in Chrome. Here is also a screenshot of the error and VS Code same as the Code itself where the error is taking place. Please help: I would be very grateful! :)
Here you can see the code and the Error
import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
const ProductScreen = ({ match }) => {
const product = products.find((p) => p._id === match.params.id)
return (
<>
<Link className='btn btn-light my-3' to='/'>
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`} />
</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</>
)
}
export default ProductScreen
According to the react-router-bootstrap
document:
It's an integration between React Router v4 and React Bootstrap by wrapping your React Bootstrap element in a
<LinkContainer>
.
So just import <LinkContainer>
from react-router-bootstrap
, for another component like List
and Button
import them from react-bootstrap
package, so install it according to it's document
Personally I see no reason to use react-router-bootstrap
package.
change
import { Row, Col, Image, ListGroup, Card, Button } from 'react-router-bootstrap'
to
import { Row, Col, Image, ListGroup, Card, Button } from 'react-bootstrap'
then error is gone.
with react-router-bootstrap you can change:
<Link className='btn btn-light my-3' to='/'>
Go Back
</Link>
to
<LinkContainer to="/">
<Button>Go Back</Button>
</LinkContainer>
LinkContainer is imported from react-router-bootstrap
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.