Obtengo una matriz en React/Next, pero antes de mapearla, ejecuto algunos filtros y la clasifico. Me gustaría mostrar un mensaje simple si no se encuentra nada después de ejecutar los filtros. Debería mostrar un lapso con una cadena de texto simple (jsx).
El código es bastante simple:
{ArrayObj .filter( (item) => // conditions here ) .sort((a, b) => (a.condition > b.condition ? 1 : -1)) .map((item) => ( <li key={item._id}> // contents of each iteration here </li> ))}Supongo que debería ir justo antes del .map, pero estoy atascado en esto.
El código completo es el siguiente:
{yachtListings .filter( (yacht) => yacht.buildYear >= searchYear && yacht.price <= searchPrice && yacht.length <= searchLength && yacht.type === searchType ) .filter((yacht) => filterKeyword == '' ? yacht : yacht.modelName .toLowerCase() .includes(filterKeyword.toLowerCase()) ) .sort((a, b) => (a[sortOrder] > b[sortOrder] ? 1 : -1)) .map((yacht) => ( <li key={yacht._id}> <SecondHandCard /> // card components with props </li> ))}Puedes ver una demostración en vivo aquí . Soy un tipo de front-end que lleva mis habilidades al back-end cada vez más.
Primero puede filtrar la matriz y luego mostrar condicionalmente jsx dependiendo de la longitud de eso.
let filteredArray = ArrayObj.filter((item) => {...}).sort(...); {filteredArray.length == 0 ? <span>Message</span> : filteredArray.map(...)}