Me gustaría preguntar cómo puedo limitar mi bucle .map , por ejemplo, a 5 elementos solo porque actualmente, cuando accedo a una API, devuelve 20 elementos. pero quiero mostrar solo 5. En su mayoría, lo que encontré es simplemente recorrer todo el conjunto de objetos y no limitarlo a una cantidad de elementos.
Nota: no tengo control sobre la API porque solo estoy usando la API moviedb
Aquí está mi código:
var film = this.props.data.map((item) => { return <FilmItem key={item.id} film={item} /> }); return film;Puede usar Array#slice y tomar solo los elementos que necesita.
var film = this.props.data.slice(0, 5).map((item) => { return <FilmItem key={item.id} film={item} /> }); return film; Si ya no necesita la matriz original, puede mutar la matriz estableciendo la longitud en 5 e iterarlos.
Podrías usar filter() también
var film = this.props.data.filter((item, idx) => idx < 5).map(item => { return <FilmItem key={item.id} film={item} /> }); return film;También puede limitarlo pasando un segundo argumento a una devolución de llamada map() , que sería un índice de un elemento en el bucle.
const film = this.props.data?.map( (item, index) => index < 5 && ( // <= only 5 items <FilmItem key={item.id} film={item} /> ) ); return film;Sin embargo, probablemente debería apegarse a la respuesta de Nina a menos que realmente necesite algo de elegancia en su código. Ya que supongo que mi respuesta sería más lenta en cuanto al rendimiento.
Referencias: