Closed Wanhenri closed 4 years ago
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>
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>
);
}
I need to pass the status of the 'product' and the 'vendor'
They have different attributes. In the component I need to make a different map () ... but how?