Good I am new with react, and I have the problem of not knowing how to make a loop inside this component to list all the users I have tried a thousand and one ways but I am not getting anywhere.
columns: [
{ Header: "companies", accessor: "companies", width: "45%", align: "left" },
{ Header: "members", accessor: "members", width: "10%", align: "left" },
{ Header: "budget", accessor: "budget", align: "center" },
{ Header: "completion", accessor: "completion", align: "center" },
],
rows: [
{
companies: <Company image={logoXD} name="Material UI XD Version" />,
members: (
<MDBox display="flex" py={1}>
{avatars([
[team1, "Ryan Tompson"],
[team2, "Romina Hadid"],
[team3, "Alexander Smith"],
[team4, "Jessica Doe"],
])}
</MDBox>
),
budget: (
<MDTypography variant="caption" color="text" fontWeight="medium">
$14,000
</MDTypography>
),
completion: (
<MDBox width="8rem" textAlign="left">
<MDProgress value={60} color="info" variant="gradient" label={false} />
</MDBox>
),
},
],
Where I would like to make the loop would be in rows
Thank you very much
You can loop on an array with the map function. If you want to display the row for instance, you can do like this, in your return function:
return (
<>
{
rows.map(row => row) // Display every row
}
</>
)
or if you want to access a specific property of each row:
rows.map(row => row.companies) // Display every companies
Take a look at some examples if you are not familiar with map