Puede que se de el caso de que halles algún fallo en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes aplicar el código al proyecto final.
Solución:
Usar Array.slice
antes de mapear.
peopleGroup
.slice(0, 5) // creates a copy of original, 5 items long
.map(...) // subsequent operations work on the copy
¡Tada!
¿Cómo romper una función .map?
No es posible, no podemos romper #array.map, se ejecutará para cada elemento de array.
Para resolver su problema, puede usar dividir primero y luego mapear, dividir los primeros 5 elementos de array luego ejecute el mapa en eso.
Como esto:
peopleGroup.slice(0,5).map((people, i) =>
return (...)
En lugar de usar .slice
y .map
que creará otro bucle.
Puedes usar .reduce
de esa manera está haciendo su lógica con un bucle (mejor rendimiento).
la diferencia es que .map
tendrá que devolver la misma longitud de la arraydónde .reduce
puede devolver cualquier cosa en realidad.
data.reduce((result, current, i) =>
if (i < 5)
result.push(current);
return result;
, [])
Ejemplo de ejecución:
const data = [1, 2, 3, 4, 5, 6, 7];
const App = () => (
data.reduce((result, current, i) =>
if (i < 5)
result.push(current);
return result;
, [])
);
ReactDOM.render( , document.getElementById('root'));
Sección de Reseñas y Valoraciones
Si para ti ha resultado útil nuestro artículo, nos gustaría que lo compartas con el resto programadores así contrubuyes a difundir esta información.