Tengo la siguiente matriz de objetos. Estoy tratando de filtrar los productos por tamaño de tal manera que todos los productos del tamaño específico seleccionado por el usuario solo se representen como normalmente sucede en un sitio web de comercio electrónico.
Entonces, por ejemplo, si selecciono el tamaño S, solo quiero que se reproduzcan los productos que tienen el tamaño "S" disponible en el inventario.
part1 para tomar el tamaño recogido por el usuario
const sizeFilterHandler = (event) => { console.log(event.target.value); setSizeFilter(event.target.value); };part2 para tomar el tamaño recogido por el usuario
onChange={sizeFilterHandler} className="form-select mb-3" aria-label=".form-select-lg example" > <option selected>Size</option> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="XXL">XXL</option> <option value="XXXL">XXXL</option> </select> "inventoryInfo": [ { "skuId": 47638228, "label": "S", "inventory": 227, "available": true }, { "skuId": 47638227, "label": "M", "inventory": 330, "available": true }, { "skuId": 47638224, "label": "L", "inventory": 325, "available": true }, { "skuId": 47638225, "label": "XL", "inventory": 313, "available": true }, { "skuId": 47638226, "label": "XXL", "inventory": 146, "available": true }, { "skuId": 47638223, "label": "3XL", "inventory": 80, "available": true } ],Filtro y mapa
return ( <div className="App"> {/* XL is your value from setFilter */} {inventoryInfo .filter((item) => item.label === 'XL' && item.available === true) .map((element, index) => ( <> <div key={index}>{element.skuId}</div> <div key={index}>{element.label}</div> <div key={index}>{element.inventory}</div> <div key={index}>{element.available}</div> </> ))} </div> );