I want to update the variants in a table like the figure below:
Where each variant type is mapped to another different variant type. for example, red variant type which is a variant type from color variants is mapped to L variant type which is a variant type from size variants.
The variants data structured like below:
I wrote this code so far, and I am stuck at this point, any help is appreciated.
{data &&data.map((variant) => (
<>
{variant.variants &&
variant.variants.map((subVar) => (
<tr
className="whitespace-nowrap "
key={subVar.id}
>
<td>
<input
checked={selectAll}
type="checkbox"
className="custom-control-input"
/>
<label className="custom-control-label"></label>
</td>
<td className="px-6 py-4">
{(() => {
for (let i = 0; i < variant.id; i++) {
const temp = subVar.variantName;
return `${temp}`;
}
})()}
</td>
Not knowing how your data is structured I might think that you could use template string, like you're doing, but adding both variants, like:
{data &&data.map((variant) => (
<>
{variant.variants &&
variant.variants.map((subVar) => (
<tr
className="whitespace-nowrap "
key={subVar.id}
>
<td>
<input
checked={selectAll}
type="checkbox"
className="custom-control-input"
/>
<label className="custom-control-label"></label>
</td>
<td className="px-6 py-4">
{(() => {
let tempArray = []
for(let x = 0; x < data.length; x++) {
tempArray.push(data.variants[x])
}
return tempArray.join(' / ')
})()}
</td>
When you're return a single variable you don't need to use the template string, you can simply return it.
You can read more about, here