Quiero representar de 0 a 3 elementos si un estado es falso y de 4 al final de la longitud de la matriz si el estado es verdadero haciendo clic en See more
Tengo el siguiente fragmento de código pero está fallando:
{items .filter((item) => DateTime.fromISO(item.date).year === lastYear) **.slice(showArticles ? (4, items.length) : (0, 3))** .map((filteredItem) => ( <div> <date>{filteredItem.date}</date> <span>{filteredItem.article}</div> </div> ))} <button onClick={() => { showArticles; }} > See more </button>La condición de corte actual lo está haciendo para que no se represente nada. ¿Cómo puedo mostrar mis artículos en consecuencia?
Puede distribuir una matriz de argumentos en el slice de división. Recuerde que el índice final está excluido, por lo que si desea los elementos 0-3, especifique slice(0, 4) .
El método
slice()devuelve una copia superficial de una parte de una matriz en un nuevo objeto de matriz seleccionado destartaend(endse incluye el final), donde elstarty elendrepresentan el índice de los elementos de esa matriz. La matriz original no se modificará.
items.filter((item) => DateTime.fromISO(item.date).year === lastYear) .slice(...(showArticles ? [4] : [0, 4])) // 4 through the end, or 0 to 3 .map((filteredItem) => (.... function App() { const [showArticles, setShowArticles] = React.useState(); return ( <div className="App"> <button type="button" onClick={() => setShowArticles((s) => !s)}> Toggle </button> {Array.from({ length: 10 }, (_, i) => i) .slice(...(showArticles ? [4] : [0, 4])) .map((el) => ( <li key={el}>{el}</li> ))} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <App />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />Está teniendo un extra () dentro de la rebanada, esto debería ser así:
{items .filter((item) => DateTime.fromISO(item.date).year === lastYear) .slice(showArticles ? 4 : 0, showArticles ? items.length : 3) .map((filteredItem) => ( <div> <date>{filteredItem.date}</date> <span>{filteredItem.article}</div> </div> ))}