One issue I'm facing is that I have an array named paymentMethods which I'd like to iterate through in tabs. However, I seem to be struggling with the iteration part.
To take a closer look at my code, please visit my codesandbox HERE
<div>
{paymentMethods && paymentMethods.length > 0 ? (
<Paper square className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
aria-label="icon label tabs example"
>
<Tab icon={<PhoneIcon />} label="Card" />
<Tab icon={<FavoriteIcon />} label="Paypal" />
</Tabs>
<Grid container spacing={4}>
<Grid item xs={12} sm={6} md={3}>
<Card className={classes.card}>
<CardHeader className={classes.cardHeader} title={`****`} />
<CardContent className={classes.content}>
<Table className={classes.table} aria-label="simple table">
<TableBody>
<TableRow>
<TableCell variant="head">Type</TableCell>
<TableCell variant="body">Card</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Card Number</TableCell>
<TableCell variant="body">***</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Expiry Month</TableCell>
<TableCell variant="body">12/2</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Expiry Year</TableCell>
<TableCell variant="body">2021</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">CVC</TableCell>
<TableCell variant="body">***</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
</Grid>
</Grid>
</Paper>
) : (
<Typography>no available</Typography>
)}
</div>