Lijsten

Lijsten in React

Tot nu toe hebben we met JSX telkens maar 1 ding per keer getoond. Vaak wordt er gebruik gemaakt van arrays en deze kunnen we niet uitdrukken in 1 HTML-element. We willen dus een HTML-element renderen per element van de array. Dit gaan we doen aan de hand van de map functie die elk element van de array zal mappen naar een HTML-element.

We plaatsen nu een array bovenaan ons App.tsx bestand:

let games : string[] = [
  "World of Warcraft",
  "Valheim",
  "Minecraft"
]

Dit is een eenvoudige array van strings met 3 computer spelletjes in.

const App = () => {
  return (
    <div>
      <h1>Welcome to the H2O Game shop</h1>
      <div>{games.map((game: string) => {
        return <div key={game}>{game}</div>
      })}</div>
    </div>
  );
}

De map functie zet een lijst van elementen om naar een lijst van nieuwe elementen. Hier zetten we eigenlijk de lijst van strings om naar een lijst van <div> elementen met daarin de naam van de persoon van de array.

Omdat React gebruik maakt van geoptimaliseerde technieken voor het tonen van lijsten moet je altijd bij de elementen in de map constructie een property key plaatsen zodat deze weten of een element moet gerenderd worden als de array wijzigt. Omdat we hier zelf geen ids hebben voor de personen gebruiken we hier even de naam zelf als key.

const App = () => {
  return (
    <div>
      <h1>Welcome to the H2O Game shop</h1>
      <div>{games.map((game: string) => {
        return <div key={game}>{game}</div>
      })}</div>
    </div>
  );
}

We kunnen hier ook gebruik maken van arrays van objecten. Zoals hieronder wordt getoond, als het object dan een unieke ID heeft kan je deze gebruiken voor de key.

interface Game {
  id?: number
  name: string,
  releaseYear: number,
  sales: number
}

let games: 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
  }
]

en dan kan je deze array ook tonen in je JSX code als volgt:

const App = () => {
  return (
    <div>
      <h1>Welcome to the H2O Game shop</h1>
      <div>{games.map((game: Game) => {
        return <div key={game.id}>
                  <div>{game.name}</div>
                  <div>{game.releaseYear}</div>
                  <div>{game.sales}</div>                  
               </div>
      })}</div>
    </div>
  );
}

Tot nu toe zijn onze elementen nog geen hoogvliegers op vlak van styling. Hier zullen we in een verder deel zeker verbeteren bij het toevoegen van stylesheets.