Iterate Array in Tabs in React

Question

I have an array called paymentMethods and i want to iterate it to tabs? My problem is i can't iterate it.

Pls see my codesandbox here CLICK 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>

Answer 1

Here I have tried to make a working example. You can organize your json for more efficient looping. I just made another constant to store more parameters to put inside the tabs.

        {paymentmethodNames.map((p, index) => (
          <Tab icon={p.icon} label={p.title} {...a11yProps(index)} />
        ))}

The tabs indeed need some index-based panel selection. The panels are filled with content by looping over paymentMethods JSON data. Just add a conditional statement when you will have a change in the JSON structure. For example, PayPal does not have CVC.

Answer 2

You are probably looking for something like this:

  <Tabs
    value={value}
    onChange={handleChange}
    variant="fullWidth"
    indicatorColor="secondary"
    textColor="secondary"
    aria-label="icon label tabs example"
  >
  {paymentMethods.map(p => (
      <Tab icon={<PhoneIcon />} label="{p.label}" />
  ))}
  </Tabs>

Note that the label and onChange code is just a guess - you probably want to put some stuff from p into the template, but I don't know what exactly.