Wyświetlanie losowych wartości z pliku JSON

Question

Witam. Robie mały projekt w React.js. Chciałbym wywołać 5 losowych obiektów z pliku JSON, a potem przekazać je do propsów i wyświetlić za pomocą spread operatora. I teraz pytanie. Jaki sposób byłby najbardziej odpowiedni na wylosowanie i zadeklarowanie obiektów z JSON'a ? Utworzyć tablice z pięcioma losowymi elementami a potem odwołać się do nich w propsach czy jak ? Poniżej daje kod:

import React from 'react';
import PlayerCard from './PlayerCard';
import DataSet from '../../../data/DataSet.json'

class HorizontalPanel extends React.Component{
    render(){
        return(
            <div>
                <PlayerCard name={DataSet.teams[0].players[0].name} image={DataSet.teams[0].players[0].portrait}/>
                <PlayerCard name={DataSet.teams[0].players[1].name} image={DataSet.teams[0].players[1].portrait}/>
                <PlayerCard name={DataSet.teams[0].players[2].name} image={DataSet.teams[0].players[2].portrait}/>
                <PlayerCard name={DataSet.teams[0].players[3].name} image={DataSet.teams[0].players[3].portrait}/>
                <PlayerCard name={DataSet.teams[0].players[4].name} image={DataSet.teams[0].players[4].portrait}/>
            </div>
        )
    }
}

export default HorizontalPanel;

i jeszcze plik JSON

{
    "teams": [
        {
            "team": "Arsenal",
            "players": [
                {
                    "name": "Dani Ceballos",
                    "portrait": "../src/assets/images/daniel-ceballos-fernandez-128x128.png"
                },
                {
                    "name": "Matteo Guendouzi",
                    "portrait": "../src/assets/images/player_142720974.png"
                },
                {
                    "name": "Alex Iwobi",
                    "portrait": "../src/assets/images/player_106410.png"    
                },
                {
                    "name": "Sead Kolašinac",
                    "portrait": "../src/assets/images/player_47162.png"
                },
                {
                    "name": "Lucas Torreira",
                    "portrait": "../src/assets/images/player_122791521.png"
                }
            ]
        }
    ]
}

Póki co w komponencie odwołuje się do konkretnych elementów tablicy powtarzając wielokrotnie ten sam kod, co nie jest zbytnio eleganckie chciałbym zastąpić to losowymi obiektami z JSON'a i nie powtarzać kodu.

Answer 1

Może sobie je jakoś ponumeruj a potem losuj numer