0
197
VistasMostrar datos anidados con un condicional: ¿Cómo no puedo mostrar los datos cuyo color del producto no está de acuerdo con el condicional?
Estoy tratando de mostrar toda la cantidad de colores que son más de 10. La muestra, sin embargo, esto también mostrará incluso los productos cuyos colores son menos de 10. ¿Cómo soluciono esto? Gracias.
códigos y caja: https://codesandbox.io/s/products-0ccdhk?file=/src/App.js:752-1189
{product && product.map((item, i) => ( <ul key={i}> <li>{item.id}</li> <li>{item.prodName + " " + item.size}</li> {Object.entries(item.colorMap).map((color) => ( <> {color[1] > 10 && ( <> {color[0]} - {color[1]} </> )} </> ))} </ul> ))}Actualmente, esto es lo que parece:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
{product && product.map((item, i) => { const obj = item.colorMap; for (let x in obj) { if (obj[x] > 10) { return <li key={i}>{item.prodName + " " + item.size}</li>; } } })}Enlace CodeSandbox: https://codesandbox.io/s/products-forked-mtt94c?file=/src/App.js:752-1008
Debido a que usó "=> ()" en el método de mapa, devolvió elementos completos en su matriz de productos. Lo reemplacé como "=> {}" y regresé con una condición en "{}".
También puedes escribir así:
export default function App() { const newProduct = product.filter((item) => { return Object.values(item.colorMap).every((color) => color > 10); }); return ( <ul className="App"> {newProduct && newProduct.map((item, i) => ( <li key={i}>{item.prodName + " " + item.size}</li> ))} </ul> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta