Tengo una matriz con matrices allí y quiero mostrar solo los primeros 4 elementos de cada matriz anidada en el primer renderizado. Luego tengo un botón showMore que debería mostrar nuevos 4 elementos de la matriz cuando se hace clic, pero mi solución afecta a todos los demás elementos en lugar de solo al que se hizo clic. ¿Hay alguna manera de establecer los parámetros de corte dinámicamente para cada una de esas matrices? Aquí está el ejemplo de código de lo que he intentado
import { useState } from "react"; import "./styles.css"; function App() { const [start, setStart] = useState(0); const [end, setEnd] = useState(4); const arr = [ [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9] ]; const mappedArr = arr.map((e) => { return e.slice(start, end); }); const showMore = () => { setStart(start + end); setEnd(end + 4); }; return ( <div className="App"> {mappedArr.map((e) => { return ( <div> <span>{e}</span> <span onClick={showMore}>{">"}</span> </div> ); })} </div> ); }y el live codesandbox aquí ¿Cómo puedo lograr esto? ¡Cualquier ejemplo será apreciado!
Parece que necesita un start y un end separados para cada subarreglo, en lugar de tener solo uno de cada uno para todo el componente.
Para que los datos sean más fáciles de administrar, considere transformar cada subarreglo en un objeto que contenga el start y el end , además del subarreglo.
const initialArr = [ [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9], [1, 2, 3, 3, 4, 5, 6, 7, 8, 9] ]; function App() { const [arr, setArr] = React.useState(() => initialArr.map( subarr => ({ start: 0, end: 4, subarr }) )); const showMore = (i) => () => { setArr(arr.map((e, j) => j !== i ? e : ({ ...e, start: e.start + 4, end: e.end + 4, }))); }; return ( <div className="App"> {arr.map((e, i) => { return ( <div> <span>{e.subarr.slice(e.start, e.end)}</span> <span onClick={showMore(i)}>{">"}</span> </div> ); })} </div> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>