Quiero actualizar las variantes en una tabla como la siguiente figura:
Donde cada tipo de variante se asigna a otro tipo de variante diferente. por ejemplo, el tipo de variante rojo , que es un tipo de variante de las variantes de color , se asigna al tipo de variante L , que es un tipo de variante de las variantes de tamaño .
Los datos de las variantes están estructurados de la siguiente manera:
Escribí este código hasta ahora, y estoy atascado en este punto, se agradece cualquier ayuda.
{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>Sin saber cómo están estructurados sus datos, podría pensar que podría usar una cadena de plantilla, como lo está haciendo, pero agregando ambas variantes, como:
{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>Cuando devuelve una sola variable, no necesita usar la cadena de plantilla, simplemente puede devolverla.
Puedes leer más sobre, aquí