Estoy recibiendo algunos datos de transacciones de una API. Uno de los elementos de esta devolución es comprador , que en ocasiones puede ser nulo. Por lo tanto, estoy omitiendo cualquier comprador que tenga nulo . Esto crea un número variable de resultados. Idealmente, me gustaría mostrar 5 cartas y si solo hay 1 resultado, encontraré algún marcador de posición para las otras 4 cartas. El problema es cuando tengo más de 5 resultados porque se creará una tarjeta adicional. Estoy tratando de encontrar una solución que lo limite a 5. No puedo lograr esto alterando los filtros API debido a esta condición "comprador = nulo". ¿Hay algo que se pueda hacer usando un archivo de estilos o cualquier código JS/React que pueda agregar que me permita maximizarlo?
Actualmente no incorporé el componente Tarjeta y estoy trabajando solo con elementos de lista.
return ( <ul> {highestBuy.map((result) => { const { buyer, price: { amount, token_symbol }, } = result; if (!highestBuy) { return ( <div> <Spinner /> </div> ); } if (buyer !== null) { return ( <li> {buyer} {amount} {token_symbol} </li> ); } })} </ul> );Hay varias formas de hacer esto, pero hay una versión moderadamente simple.
// test array of fewer than 5 items const cardsA = [{ buyer: "Adam" }, { buyer: "Bill" }, { buyer: null }]; // more than 5 items const cardsB = [{ buyer: "Adam" }, { buyer: "Bill" }, { buyer: null }, { buyer: "Charlie" }, { buyer: null }, { buyer: "David" }, { buyer: "Ernie" }, { buyer: null }, { buyer: "Frank" } ]; const makeFive = (cards) => { // filter out the nulls cards = cards.filter(card => card.buyer !== null); // make a new array to hold the cards const newCards = []; // loop 5 times for (let ix = 0; ix < 5; ix++) { // push a card from the filtered stack or a placeholder // card if the filtered stack is too small newCards.push(cards[ix] || { buyer: "default" }); } // return the new cards return newCards; } console.log("cardsA", makeFive(cardsA)); console.log("cardsB", makeFive(cardsB));