[Bug] Failed prop type: Invalid prop

[andreadotta]

Version

latest stable

Reproduction link

https://www.creative-tim.com/learning-lab/nextjs/core-tables/material-dashboard

Operating System

linux

Device

pc

Browser & Version

chrome latest

Steps to reproduce

compile the example in Shopping Cart Table: https://www.creative-tim.com/learning-lab/nextjs/core-tables/material-dashboard.

What is expected?

compile without warning

What is actually happening?

hi, when I try to compile the example in Shopping Cart Table: https://www.creative-tim.com/learning-lab/nextjs/core-tables/material-dashboard. I had the following error:

Warning: Failed prop type: Invalid prop tableData[0][0] of type object supplied to CustomTable, expected string.

Regards

---

Solution

Additional comments

[andreadotta]

Any news?

[einazare]

Hello there, @andreadotta ,

Sorry for this late reply. I do not know why, but Github did not notify me about this issue. To solve the issue with the mentioned code, please use this:

import React from 'react';
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// material-ui icons
import Remove from "@material-ui/icons/Remove";
import Close from "@material-ui/icons/Close";
import Add from "@material-ui/icons/Add";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
// core components
import Table from "components/Table/Table.js";
import Button from "components/CustomButtons/Button.js";
import styles from "assets/jss/nextjs-material-dashboard-pro/views/extendedTablesStyle.js";

import product1 from "assets/img/product1.jpg";

const useStyles = makeStyles(styles);

export default function DemoTables(){
  const classes = useStyles();
  return (
    <Table
      tableHead={["","PRODUCT","COLOR","SIZE","PRICE","QTY","AMOUNT",""]}
      tableData={[
        [
          <div className={classes.imgContainer}>
            <img src={product1} alt="..." className={classes.img} />
          </div>,
          <span>
            <a href="#jacket" className={classes.tdNameAnchor}>
              Spring Jacket
            </a>
            <br />
            <small className={classes.tdNameSmall}>
              by Dolce&amp;Gabbana
            </small>
          </span>,
          "Red",
          "M",
          <span>
            <small className={classes.tdNumberSmall}>€</small> 549
          </span>,
          <span>
            1{' '}
            <div className={classes.buttonGroup}>
              <Button
                color="info"
                size="sm"
                round
                className={classes.firstButton}
              >
                <Remove className={classes.icon} />
              </Button>
              <Button
                color="info"
                size="sm"
                round
                className={classes.lastButton}
              >
                <Add className={classes.icon} />
              </Button>
            </div>
          </span>,
          <span>
            <small className={classes.tdNumberSmall}>€</small> 549
          </span>,
          <Button  className={classes.actionButton}>
            <Close className={classes.icon} />
          </Button>
        ],
        {
          total: true,
          colspan: "5",
          amount: (
            <span>
              <small>€</small>2,346
            </span>
          )
        },
        {
          purchase: true,
          colspan: "6",
          col: {
            colspan: 2,
            text: (
              <Button color="info" round>
                Complete Purchase{" "}
                <KeyboardArrowRight className={classes.icon} />
              </Button>
            )
          }
        }
      ]}
      tableShopping
      customHeadCellClasses={[
        classes.center,
        classes.description,
        classes.description,
        classes.right,
        classes.right,
        classes.right
      ]}
      // 0 is for classes.center, 2 is for classes.description, 3 is for classes.description
      // 4 is for classes.right, 5 is for classes.right, 6 is for classes.right
      customHeadClassesForCells={[0, 2, 3, 4, 5, 6]}
      customCellClasses={[
        classes.tdName,
        classes.tdNumber,
        classes.tdNumber + " " + classes.tdNumberAndButtonGroup,
        classes.tdNumber
      ]}
      // 1 is for classes.tdName, 4 is for classes.tdNumber, 6 is for classes.tdNumber
      // 5 is for classes.tdNumber + " " + classes.tdNumberAndButtonGroup
      customClassesForCells={[1, 4, 5, 6]}
    />
  );
}

I'll update the docs as well these days.

Best, Manu