Error passing data to display table information using Material-ui

Question

I'd be grateful if you could help me with my problem. I've written a component to demonstrate the information of an array which includes both index.js and TableData.js files. Transferring the information of array from index.js to TableData.js in order to demonstrating them, I've faced an ambiguous error.

What's the problem with my code? In which part have I made a mistake?

index.js

import React from "react";
import ReactDOM from "react-dom";
import TableData from "./TableData";

const LP = [
  { id: 11, name: "CD", price: "2000", describe: "Educational" },
  { id: 24, name: "Pen", price: "3500", describe: "Design" },
  { id: 83, name: "Pencil", price: "2500", describe: "Design" }
];

ReactDOM.render(<TableData rows={LP} />, document.getElementById("root"));

TableData.js

import React, {component} from 'react';

import {makeStyles} from '@material-ui/core/styles';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow
} from '@material-ui/core';


//****** Style CSS ******
const useStyles = makeStyles({
    root: {
        width: '100%',
        overflowX: 'auto'
    },
    table: {
        minWidth: 650
    }
});

const classes = useStyles();
const test = 'right';

//****** Class List Product ******

class TableData extends component{
    state = {
        items: this.props,
    }

    render() {
        return (
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>Name Product</TableCell>
                        <TableCell align="right">Price</TableCell>
                        <TableCell align="right">Describe</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {items.map((item, index) => (
                        <TableRow key={item.id}>
                            <TableCell component="th" scope="row">
                                {item.name}
                            </TableCell>
                            <TableCell align={test} data={item.name}>{item.price}</TableCell>
                            <TableCell align="right">{item.describe}</TableCell>
                            <TableCell align="right">
                                <button>
                                    DEL
                                </button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        )
    }

    export
    default
    TableData

`component` vs `Component` – bamtheboozle Dec 13 '19 at 14:17 — bamtheboozle, Dec 13 '19 at 14:17

score 1 · Answer 1 · answered Dec 13 '19 at 14:30

1

I believe you are missing a closing bracket } before

export
    default
    TableData

also when you {items.map((item, index) => (

it should be {this.state.items.map((item, index) => (

answered Dec 13 '19 at 14:30

octobus

1,246
1
14
20

Thanks for your good response I just received a new error just now. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app – Iman Jalali Dec 13 '19 at 16:08
– Iman Jalali Dec 13 '19 at 16:13
You are making a hook call but you can't directly use hooks in a class component. Either change your class component to funtional component or see this link: https://stackoverflow.com/questions/53371356/how-can-i-use-react-hooks-in-react-classic-class-component @Iman – octobus Dec 13 '19 at 17:47

score 0 · Answer 2 · answered Dec 13 '19 at 14:26

Just change items to items.rows

{items.rows.map((item, index) => (
                        <TableRow key={item.id}>
                            <TableCell component="th" scope="row">
                                {item.name}
                            </TableCell>
                            <TableCell align={test} data={item.name}>{item.price}</TableCell>
                            <TableCell align="right">{item.describe}</TableCell>
                            <TableCell align="right">
                                <button>
                                    DEL
                                </button>
                            </TableCell>
                        </TableRow>
                    ))}

Error passing data to display table information using Material-ui

2 Answers2