TypeError: Cannot read property 'Item' of undefined React.js

Question

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

Is react-router-bootstrap installed?

yudhiesh
– yudhiesh

2021-01-06 13:42:08 +00:00
Commented Jan 6, 2021 at 13:42 — yudhiesh
– yudhiesh, Commented Jan 6, 2021 at 13:42

armin yahya · Accepted Answer · 2021-01-06 14:36:57Z

1

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

answered Jan 6, 2021 at 14:36

armin yahya

1,5169 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Reza Ghasemi · Accepted Answer · 2021-01-06 14:33:14Z

1

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.

answered Jan 6, 2021 at 14:33

Mohammad Reza Ghasemi

3911 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'Item' of undefined React.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related