Closed Wanhenri closed 4 years ago
With ERROR:
export default function SimpleTable(props) {
const classes = useStyles();
function createData(id, name, code, code2) {
return { id, name, code, code2 };
}
const rows = [
createData(props.valueID,props.nameID, props.codeID, props.priceID)
];
return (
<Wrapper>
<Link to={props.path}>
<Button style={{marginBottom:20 }}>{props.button}</Button>
</Link>
<TableContainer component={Paper}>
<Table className={classes.table} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell>{props.id}</TableCell>
<TableCell>{props.name}</TableCell>
<TableCell align="left">{props.code}</TableCell>
<TableCell align="left">{props.price}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.name}>
<TableCell align="left">{row.id}</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.code2}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Wrapper>
);
}
with ERROR:
<Wrapper >
{posts.product&&posts.product.map(w => (
<>
<SimpleTable
valueID={w.id}
nameID={w.name}
codeID={w.code}
priceID={w.price}
id="ID"
name="Product"
code="Code"
price="Price"
button="Add Product"
path="/product"/>
</>
))}
</Wrapper>
{…}
count: 11
product: (11) […]
0: Object { id: 3, name: "deu certo", code: "1", … }
1: Object { id: 4, name: "wanderson henrique", code: "123123123", … }
2: Object { id: 5, name: "wanderson henrique", code: "123123123", … }
3: Object { id: 6, name: "wanderson henrique", code: "123123123", … }
4: Object { id: 7, name: "wanderson henrique", code: "1", … }
5: Object { id: 8, name: "deu certo", code: "1", … }
6: Object { id: 9, name: "wanderson henrique", code: "123123123", … }
7: Object { id: 10, name: "wanderson henrique", code: "123123123", … }
8: Object { id: 11, name: "wanderson henrique", code: "123123123", … }
9: Object { id: 12, name: "wanderson henrique", code: "123123123", … }
10: Object { id: 13, name: "wanderson henrique", code: "123123123", … }
length: 11
<prototype>: Array []
<prototype>: Object { … }
I think you don't have to map here, just pass post.product as props in :
<Wrapper >
{posts.product&&posts.product.map(w => (
<>
<SimpleTable
valueID={w.id}
nameID={w.name}
codeID={w.code}
priceID={w.price}
id="ID"
name="Product"
code="Code"
price="Price"
button="Add Product"
path="/product"/>
</>
))}
</Wrapper>
ok
>
{posts.product&& (
<>
<SimpleTable
product={posts.product}
id="ID"
name="Product"
code="Code"
price="Price"
button="Add Product"
path="/product"/>
</>
)}
console.log(props.product) inside
(11) […]
0: Object { id: 3, name: "deu certo", code: "1", … }
1: Object { id: 4, name: "wanderson henrique", code: "123123123", … }
2: Object { id: 5, name: "wanderson henrique", code: "123123123", … }
3: Object { id: 6, name: "wanderson henrique", code: "123123123", … }
4: Object { id: 7, name: "wanderson henrique", code: "1", … }
5: Object { id: 8, name: "deu certo", code: "1", … }
6: Object { id: 9, name: "wanderson henrique", code: "123123123", … }
7: Object { id: 10, name: "wanderson henrique", code: "123123123", … }
8: Object { id: 11, name: "wanderson henrique", code: "123123123", … }
9: Object { id: 12, name: "wanderson henrique", code: "123123123", … }
10: Object { id: 13, name: "wanderson henrique", code: "123123123", … }
length: 11
<prototype>: Array []
10: Object { id: 13, name: "wanderson henrique", code: "123123123", … }
if I click on it it will show the rest of the properties
10: {…}
code: "123123123"
id: 13
name: "wanderson henrique"
price: 123123
inside
{props.product.map((row) => (
<TableRow key={row.name}>
<TableCell align="left">{row.id}</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.price}</TableCell>
</TableRow>
))}
corrected the error!
Displaying an error when generating a table