Tengo una pregunta rápida y estoy un poco atascado. Tengo una matriz y quiero usar la mitad de la matriz en un punto y la mitad de la matriz en algún otro lugar. Así que estoy usando la función de mapa y estoy un poco atascado, ¿cómo puedo usar el posicionamiento en la función de mapa? Quiero representar una parte de la matriz en un punto y la otra mitad en otro punto.
Por ejemplo, tengo una matriz:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];y quiero poblarlo en dos lugares diferentes.
array.map((item, index) => { return ( //here i want 1,2,3,4 <li > item </li> }) } array.map((item, index) => { return ( //here i want 5,6,7,8 <li > item </li> }) }Puede usar .slice para dividir su matriz en dos matrices y luego usar .map() en cada una de ellas, vea a continuación
const numbers = [1, 2, 3, 4, 5, 6, 7, 8]; const array1 = numbers.slice(0, Math.floor(numbers.length/2)) const array2 = numbers.slice(Math.floor(numbers.length / 2)) console.log(array1) console.log(array2) //array1.map(...) //and.. //array2.map(...)Puede lograr esto de dos maneras: usando CSS o dividiendo la matriz por la mitad.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8]; const App = () => ( <div className="grid"> { numbers.map((n) => ( <div>{n}</div> )) } </div> ); // Render it ReactDOM.render(<App />, document.getElementById('react')); .grid { display: grid; grid-template-columns: repeat(4, 1fr); } .grid div { display: grid; justify-content: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div> const numbers = [1, 2, 3, 4, 5, 6, 7, 8]; const splitArr = (arr) => ((half) => [arr.slice(0, half), arr.slice(-half)]) (Math.ceil(arr.length / 2)) const App = () => ( <div className="flex"> { splitArr(numbers).map((arr) => ( <div className="row"> { arr.map((n) => ( <div>{n}</div> )) } </div> )) } </div> ); // Render it ReactDOM.render(<App />, document.getElementById('react')); .flex { display: flex; flex-direction: column; flex: 1; } .row { display: flex; flex: 1; justify-content: space-evenly; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>en este caso tienes que usar filtro. no mapa
para la primera parte puedes usar un filtro como este:
numbers.filter((it, idx) => { return idx < (numbers.length /2) && <li > item </li> })y para el segundo puedes usar esto:
numbers.filter((it, idx) => { return idx + 1 > (numbers.length /2) && it })