PROBLEM <SimpleTable /> and <Data />

[Wanhenri]

I need to pass the status of the 'product' and the 'vendor'

        <Wrapper >
          {posts.product&&(
          <>           
          <SimpleTable 
              product={posts.product}
              id="ID" 
              name="Product" 
              code="Code" 
              price="Price" 
              button="Add Product" 
              path="/product"/>          
          </>
          )}
          {postsvendor.vendor&&(
          <>           
          <SimpleTable 
              product={postsvendor.vendor}
              id="ID" 
              name="Vendor" 
              code="CNPJ" 
              price="City" 
              button="Add Vendor" 
              path="/vendor"/>          
          </>
          )}   
        </Wrapper>  

They have different attributes. In the component I need to make a different map () ... but how?

[Wanhenri]

Should I create a looping in the 'Prod' const?

  const Prod = props.product;

  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>
            {Prod.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>
                  <Button style={{marginBottom: 3, backgroundColor: "var(--color-first)" }}>DELETE</Button>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
    </Wrapper>

[Wanhenri]

To fix it, I divided into components for 'vendor' another for 'product'.

import Dataproduct from '../../component/dataproduct';
import Datavendor from '../../component/datavendor';

export default function Data () {
    return (    
        <Wrapper >
          <Dataproduct />
          <Datavendor />
        </Wrapper>    
    );
}