Cannot read property '0' of undefined in mdbreact

Question

Hey guys I'm using mdbreact to make a cart but I got some errors. I'm using code from this section: https://mdbootstrap.com/docs/react/sections/e-commerce/ Here my code:

import React from "react";
import {  MDBRow, MDBCol, MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardFooter, MDBIcon, MDBTooltip } from "mdbreact";

const Item = () => {
  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>
      <MDBRow>
        <MDBCol lg="3" md="6" className="mb-lg-0 mb-4">
          <MDBCard cascade narrow ecommerce>
            <MDBCardImage
              cascade
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg"
              top
              alt="sample photo"
              overlay="white-slight"
            />
            <MDBCardBody cascade className="text-center">
              <a href="#!" className="grey-text">
                <h5>Denim</h5>
              </a>
              <MDBCardTitle>
                <strong>
                  <a href="#!">Denim trousers</a>
                </strong>
              </MDBCardTitle>
              <ul className="rating">
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon far icon="star" />
                </li>
              </ul>
              <MDBCardText>
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
              </MDBCardText>
              <MDBCardFooter className="px-1">
                <span className="float-left font-weight-bold">
                  <strong>49$</strong>
                </span>
                <span className="float-right">
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    componentClass="fa fa-shopping-cart grey-text ml-3"
                    tooltipContent="Add to cart"
                  />
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    componentClass="fa fa-share-alt grey-text ml-3"
                    tooltipContent="Share"
                  />
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    className="active"
                    componentClass="fa fa-heart ml-3"
                    tooltipContent="Added to watchlist"
                  />
                </span>
              </MDBCardFooter>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
       
       
      </MDBRow>
    </section>
  );
}

export default Item;

The log says TypeError: Cannot read property '0' of undefined. Is this an issue from mdbreact or something ? If true, can someone suggest me other alternative UI library for reactjs please ? React Bootstrap doesn't look good to me since I'm bad at CSS. Thank you

Ted · Answer 1 · 2019-05-14T14:13:48.063

The error is in your implementation of MDBTooltip. From the documentation, it appears that component needs two children, the first being what the tooltip is attached to, and the second the content. Click here for a working example which implements the following code

import React from "react";
import { MDBBtn, MDBRow, MDBCol, MDBCard, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardFooter, MDBIcon, MDBTooltip } from "mdbreact";

const Item = () => {
  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>
      <MDBRow>
        <MDBCol lg="3" md="6" className="mb-lg-0 mb-4">
          <MDBCard cascade narrow ecommerce>
            <MDBCardImage
              cascade
              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg"
              top
              alt="sample photo"
              overlay="white-slight"
            />
            <MDBCardBody cascade className="text-center">
              <a href="#!" className="grey-text">
                <h5>Denim</h5>
              </a>
              <MDBCardTitle>
                <strong>
                  <a href="#!">Denim trousers</a>
                </strong>
              </MDBCardTitle>
              <ul className="rating">
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon icon="star" />
                </li>
                <li>
                  <MDBIcon far icon="star" />
                </li>
              </ul>
              <MDBCardText>
                Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
              </MDBCardText>
              <MDBCardFooter className="px-1">
                <span className="float-left font-weight-bold">
                  <strong>49$</strong>
                </span>
                <span className="float-right">
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    componentClass="fa fa-shopping-cart grey-text ml-3"
                    tooltipContent="Add to cart"
                  >
                    <MDBBtn>Tooltip button</MDBBtn>
                    <div>
                      Tooltip content
                    </div>
                  </MDBTooltip>
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    componentClass="fa fa-share-alt grey-text ml-3"
                    tooltipContent="Share"
                  >
                  <MDBBtn>Tooltip button</MDBBtn>
                    <div>
                      Tooltip content
                    </div>
                  </MDBTooltip>
                  <MDBTooltip
                    placement="top"
                    tag="a"
                    component="i"
                    className="active"
                    componentClass="fa fa-heart ml-3"
                    tooltipContent="Added to watchlist"
                  >
                  <MDBBtn>Tooltip button</MDBBtn>
                    <div>
                      Tooltip  content
                    </div>
                  </MDBTooltip>
                </span>
              </MDBCardFooter>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </section>
  );
}

export default Item;

I've tried another example without tooltip and it's still the same error — 聖杯ツグミ, May 13 '19 at 20:06
@聖杯ツグミ I updated my answer to include all your code with the corrections I suggested. Click the link to see it functioning. — Ted, May 14 '19 at 14:14

Cannot read property '0' of undefined in mdbreact

1 Answers1