ERROR in <SimpleTable />

[Wanhenri]

Displaying an error when generating a table

[Wanhenri]

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>
  );
}

[Wanhenri]

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>    

[Wanhenri]

{…}
​
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 { … }

[Wanhenri]

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>    

[Wanhenri]

ok

>
          {posts.product&& (
          <>           
          <SimpleTable 
              product={posts.product}
              id="ID" 
              name="Product" 
              code="Code" 
              price="Price" 
              button="Add Product" 
              path="/product"/>

          </>
          )}

[Wanhenri]

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 []

[Wanhenri]

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

[Wanhenri]

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>
              ))}

[Wanhenri]

corrected the error!