Planszówka jako gra przeglądarkowa - koncepcja

Cześć,

jestem w trakcie nauki Reacta. Wymyśliłem sobie, że w ramach nauki zrobię przeglądarkową wersję planszówki z dzieciństwa. W związku z tym chciałbym zapytać czy sposób w jaki chcę to zrobić jest poprawny.
Gra ogólnie polega na rzucaniu 12-ściennymi kostkami i zdobywaniu w ten sposób zwierząt. W grze gracz będzie rywalizował z komputerem. Jest 9 zwierząt (różnej wagi), które można wzajemnie wymieniać. Gra kończy się w momencie, gdy gracz będzie miał wszystkie zwierzęta.

Myślałem, żeby wszystkie dane graczy trzymać w jednym obiekcie np.

const data = {
  playerOne: {
    animal1: 12,
    animal2: 2,
    .
    .
    .
  },
  playerTwo: {
    animal1: 7,
    animal2: 5,
    .
    .
    .
  }
}

Wtedy w celu wyświetlenia danych gracza na ekranie (głównie liczba poszczególnych zwierząt) mogę stworzyć komponent, do którego przekażę dane gracza jako props-a. Czy poniższe rozwiązanie umożliwi mi dostęp do ilości poszczególnych zwierząt w tym komponencie?

<Player props={data.playerOne}/>
<Player props={data.playerTwo}/>

Dziękuję za pomoc !!!

Propsy i state w react to zwykły obiekt JS, zatem tak możesz przekazywać dane w ten sposób i tak, będziesz miał dostęp do pól tego obiektu czyli ilości zwierząt.

Jeśli podepniesz w ten sposób to nie zadziała - komponent nie będzie widział zmian. Musisz użyć this.state+this.setState albo hooków.