Callback handlers

Tot nu hebben we props en state gezien om informatie bij te houden en door te geven tussen verschillende componenten. Maar we missen nog 1 belangrijk concept om communicatie tussen componenten te laten gebeuren. Op dit moment kunnen we onze informatie invoeren in onze invoer velden in de InputView⁣, maar maar kunnen we nog op geen enkele manier deze informatie doorgeven aan het App component die onze lijst bevat.

Props kunnen alleen informatie naar beneden doorgeven. Dus we moeten zelf iets maken dat dit wel mogelijk maakt. Dit noemen we een callback handler (A). Deze geven we door aan onze component aan de hand van props (B)

const App = () => {
  ...
  // A
  const handleAdd = (game: Game) => {
    console.log(game);
  }

  return (
    <div>
      <Header />
      <List games={games} />
      {/* // B */}
      <InputView onAdd={handleAdd}/>
    </div>
  );
}

Voordat we deze callback functie kunnen gebruiken in onze InputView moeten we deze toevoegen aan de properties van dat component, dus we maken weer een interface voor dit component.

interface InputViewProps {
  onAdd: (game: Game) => void
}

Vervolgens voegen we deze properties toe aan ons InputView component zelf.

const InputView = ({onAdd} : InputViewProps) => {
    ...
}

Nu kunnen we in onze handler van de button click deze onAdd callback handler oproepen. We maken hier een Game object aan gebruik makende van de waarden die in de state zijn opgeslagen. Als de gebruiker nu op de add knop klikt dan zal de onAdd callback handler aangeroepen worden die werd meegegeven uit het App component.

const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {
  onAdd({
    name: name,
    releaseYear: year,
    sales: 0
  })
}

Om nu onze applicatie volledig functioneel te maken willen we nu er voor zorgen dat het game in kwestie wordt toegevoegd aan de lijst die zich bevindt in het App component. Momenteel wordt de lijst van games nog bijgehouden in een variabele, omdat deze nu interactief gaat worden en dus gaat veranderen over de tijd is het de bedoeling om ook deze te gaan bijhouden in een state.

const [games, setGames] = useState<Game[]>([
  {
    id: 0,
    name: "World of Warcraft",
    releaseYear: 2004,
    sales: 0
  },
  {
    id: 1,
    name: "Valheim",
    releaseYear: 2021,
    sales: 0
  },
  {
    id: 2,
    name: "Minecraft",
    releaseYear: 2011,
    sales: 0
  }
]);

Je eerste gevoel is waarschijnlijk om rechtstreeks in de games array je nieuwe game te gaan pushen.

const handleAdd = (game: Game) => {
  games.push(game); // FOUT!
}

Maar zoals we al in het onderwerp over State hebben behandeld mag je NOOIT iets rechtstreeks aanpassen aan een state variabele. Je moet hier de setGames functie gebruiken die je hebt aangemaakt via de useState hook. We gebruiken hier de spread operator (drie puntjes) om de inhoud van de games array te nemen en daar achter een element te plakken.

const handleAdd = (game: Game) => {
  setGames([...games, game])
}

Als je nu op de add knop drukt dan wordt de games state aangepast en dan zal ook de List component opnieuw gerendered worden. Dit komt omdat de games daar worden meegegeven als props. Als de props updaten van een component dan wordt het component zelf ook opnieuw gerendered.

Momenteel hebben we nog wel geen id aan deze game gegeven want op het moment dat we het formulier invulden wisten we nog niet wat de id ging worden. We kunnen hier het maximum berekenen van alle id waarden van alle games.

const handleAdd = (game: Game) => {
  let max = Math.max(...games.map((g) => g.id!),0) + 1;
  game.id = max;
  setGames([...games, game])
}