Topic: e-commerce section: product V5. TypeError: Cannot read property '1' of undefined
Expected behavior Products v.5 : https://mdbootstrap.com/docs/react/sections/e-commerce/ i just copy the code and it doesnt work. I m using pro mdbreact: so i dont understand the error, please help Actual behavior : I have this error: ←→1 of 18 errors on the page TypeError: Cannot read property '1' of undefined
Resources (screnter code hereeenshots, code snippets etc.)
import React from "react";
import { MDBRow, MDBCol, MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardFooter, MDBTooltip, MDBCarousel, MDBCarouselInner, MDBCarouselItem } from "mdbreact";
const EcommercePage = () => {
return (
<section className="text-center my-5">
<h2 className="h1-responsive font-weight-bold text-center my-5">
Our bestsellers
</h2>
<p className="grey-text text-center w-responsive mx-auto mb-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
<MDBCarousel
activeItem={1}
length={3}
slide={true}
showControls={true}
showIndicators={true}
multiItem
>
<MDBCarouselInner>
<MDBRow>
<MDBCarouselItem itemId="1">
<MDBCol md="4">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shoes</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Leather boots</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">69$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Jeans</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Slim jeans</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">99$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shorts</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Denim shorts</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">49$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId="2">
<MDBCol md="4">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shoes</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Leather boots</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">69$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Jeans</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Slim jeans</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">99$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Others/img%20(35).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shorts</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Denim shorts</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">49$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
<MDBCarouselItem itemId="3">
<MDBCol md="4">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(32).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shoes</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Leather boots</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">69$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(33).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Jeans</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Slim jeans</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">99$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol md="4" className="clearfix d-none d-md-block">
<MDBCard narrow ecommerce className="mb-2">
<MDBCardImage
cascade
top
src="https://mdbootstrap.com/img/Photos/Others/img%20(38).jpg"
alt="sample photo"
/>
<MDBCardBody cascade>
<a href="#!" className="text-muted">
<h5>Shorts</h5>
</a>
<MDBCardTitle>
<strong>
<a href="#!">Denim shorts</a>
</strong>
</MDBCardTitle>
<MDBCardText>
Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci.
</MDBCardText>
<MDBCardFooter className="px-1">
<span className="float-left">49$</span>
<span className="float-right">
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-eye grey-text ml-3"
tooltipContent="Quick look"
/>
<MDBTooltip
placement="top"
tag="a"
component="i"
componentClass="fa fa-heart grey-text ml-3"
tooltipContent="Add to watchlist"
/>
</span>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBCarouselItem>
</MDBRow>
</MDBCarouselInner>
</MDBCarousel>
</section>
);
}
export default EcommercePage;
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.26.0
- Device: pc
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes
Related topics