Tengo esta función de flecha array.map() y tengo el siguiente error: "Array.prototype.map() espera que se devuelva un valor al final de la función de flecha array-callback-return"
Aquí está mi código:
{productList.map((val) => { const category = val.CategoryName; // const quantity = val.ProductQuantity if (category === "MotorcycleParts") { if (val.ProductQuantity !== 0) { return ( <div> <div> <div class="buyNowBtnDiv"> {localStorage.getItem("username") === "" || localStorage.length === 0 ? ( <div id="buyAddBtn"> </div> ) : ( <div id="buyAddBtn"> </div> )} </div> </div> </div> ); } } })}He leído sobre el error y veo que tiene algo que ver con requerir un valor de retorno, pero ¿tengo esto?
Un ejemplo de código con una solución ayudaría, creo que sería algo simple.
Simplemente puede devolver nulo cuando las condiciones enumeradas no coinciden:
{productList.map((val) => { const category = val.CategoryName; // const quantity = val.ProductQuantity if (category === "MotorcycleParts") { if (val.ProductQuantity !== 0) { return ( <div> <div> <div class="buyNowBtnDiv"> {localStorage.getItem("username") === "" || localStorage.length === 0 ? ( <div id="buyAddBtn"> </div> ) : ( <div id="buyAddBtn"> </div> )} </div> </div> </div> ); } return null; } })}map tiene que devolver un valor para cada elemento.
Si desea filtrar, debería considerar usar Array.prototype.filter() antes, para que pueda eliminar los if s en su mapa.
El código también es mucho más fácil de leer.
{productList.filter(val => val.CategoryName === "MotorcycleParts" && val.ProductQuantity !== 0) .map((val) => { return ( <div> <div> <div class="buyNowBtnDiv"> {localStorage.getItem("username") === "" || localStorage.length === 0 ? ( <div id="buyAddBtn"> </div> ) : ( <div id="buyAddBtn"> </div> )} </div> </div> </div> ); })}