Props

Op dit moment hebben we nog altijd onze data die we gebruiken voor onze lijst in een globale variabele gestoken in de huidige applicatie. Het is uiteraard niet houdbaar om alles in globale variabelen te steken en deze zo te delen onder verschillende componenten. De juiste manier om dit te doen in React is deze lijst of andere variabelen door te geven als props of properties. We geven dus informatie door van het ene component naar de andere.

Voordat we props voor de eerste keer gaan gebruiken in onze applicatie gaan we eerst onze lijst van games verplaatsen naar het App component zelf.

const App = () => {
  let games: Game[] = [
    ...
  ]
  
  return (
    ...
  );
}

Nu geeft uiteraard de List component een foutmelding omdat de games variabele niet meer globaal staat en dit component dus geen toegang heeft tot deze lijst. We gaan dit oplossen door de games variabele door te geven aan de List component aan de hand van een react prop (property). Het lijkt alsof we een nieuwe html attribuut aanmaken voor de List component.

return (
  <div>
    <Header/>
    <List games={games}/>
    <InputView/>
  </div>
);

De properties van de List component moeten dan nog wel beschreven worden aan de hand van een interface. We geven deze interface meestal de naam van het component gevolgd door Props.

interface ListProps {
  games: Game[]
}

Als je deze interface dan wil gebruiken in je component kan je deze als volgt gebruiken.

const List = (props : ListProps) => {
  return (
      <ul>{props.games.map((game: Game) => {
        ....
      })}
      </ul>
  );
}

Als je niet elke keer props.games wil typen om de games property aan te spreken kan je ook gebruikmaken van destructuring om de props al uit te pakken in aparte variabelen. Dit doe je op de volgende manier:

const List = ({games} : ListProps) => {
  return (
      ...
  );
}

en dan kan je de games variabele gebruiken net zoals ervoor. Als je niet voor elk component een interface wil aanmaken kan je ook de interface in de functie definitie zelf beschrijven

const List = ({games} : {games: Game[]}) => {
    ...
}

Nu kunnen we onze kennis over props gaan gebruiken om onze List component nog verder op te splitsen in kleinere componenten als we dit willen. Zo kunnen we een ListItem introduceren die verantwoordelijk is voor het tonen van 1 item van de lijst.

interface ListItemProps {
  game: Game
}

const ListItem = ({ game }: ListItemProps) => {
  return (
    <div key={game.id}>
      <div>{game.name}</div>
      <div>{game.releaseYear}</div>
      <div>{game.sales}</div>
    </div>
  )
}

en kunnen we het List component nog meer vereenvoudigen:

const List = ({ games }: ListProps) => {
  return (
    <ul>{games.map((game: Game) => {
      return <ListItem game={game}/>
    })}
    </ul>
  );
}

Het gebeurt vaak dat props doorheen meerdere componenten worden doorgegeven. Indien je componenten structuur dieper en dieper wordt, wordt het ook altijd maar minder praktisch om dingen te gaan blijven doorgeven aan de hand van properties. We zien later nog hoe we dit probleem kunnen oplossen.