.mapのループで項目を制限する

質問

私は、どのように私の .map ループを5つのアイテムに限定する方法をお聞きしたいです。現在、私がAPIにアクセスすると、20のアイテムを返しますが、私は5つだけを表示したいです。私が見つけたほとんどは、オブジェクトの配列全体を通してループするだけで、アイテム数に制限していません。

注：私はmoviedbのapiを使用しているだけなので、APIを制御することはできません。

以下は私のコードです。

var film = this.props.data.map((item) => {
  return <FilmItem key={item.id} film={item} />
});

return film;

どのように解決するのですか？

あなたは Array#slice というように、必要な要素だけを取り出します。

var film = this.props.data.slice(0, 5).map((item) => {
        return <FilmItem key={item.id} film={item} />
    });

return film;

元の配列が不要になった場合は、配列を変異させて長さを 5 とし、それを反復する。