Header-komponentin vaihtoehtoinen sisältö

Sovelluksen navigointi toimii tällä hetkellä juuri niin, kuin sen pitäisikin. Aikaisemmin, kun toteutimme Store- ja Settings-komponentteja, niin välitimme Header-komponentille kerättyjen sitruunoiden määrän (balance).

Store-komponentissa Header-komponenttia kutsutaan seuraavasti:

      <Header balance={props.stats.balance}>store</Header>

Ja hyvin identtisesti myös Settings-komponentissa:

      <Header balance={props.stats.balance}>settings</Header>

Toteutetaan seuraavaksi Header-komponenttiin ehtorakenne, joka renderöi otsikon hieman eri tavalla, jos komponentille on välitetty balance-arvo. Avaa src/components-kansion Header.jsx-tiedosto ja tee siihen seuraavat muutokset:

1. Tuodaan sitruunaikoni tiedoston alussa seuraavalla import-lauseella:

   import iconLemon from '../assets/lemon.svg';
   

2. Muutetaan funktion koodi seuraavanlaiseksi:

     if (props.hasOwnProperty("balance")) {
       return (
         <div className="header header_sub">
           <h1>{props.children}</h1>
           <div>{props.balance} <img src={iconLemon}/></div>
         </div>
       );
     } else {
       return (
         <div className="header">
           <h1>{props.children}</h1>
         </div>
       );
     }
   

   Tämä ehdolllistaa renderöinnin sen perusteella, onko balance-arvo määritelty. Tarkistus tapahtuu oliomuuttujan hasOwnProperty-funktion avulla. Se palauttaa toden, jos props-muuttujassa on balance-avaimella arvo. Jos balance-arvo on määritelty, niin renderöidään otsikon lisäksi div-elementti, jossa on kassassa olevien sitruunoiden määrä. Elementin toiiseksi luokaksi määritellään header_sub, joka asemoi sisällön sekä vasempaan että oikeaan reunaan. Koodin else-osa on sama kuin aikaisemmin, jossa otsikko tulostetaan keskitettynä.

Näiden muutosten jälkeen sekä Store- että Settings-sivujen otsikko on muuttunut niin, että otsikkoteksti on pienemmällä ja oikeassa reunassa on kassassa olevien sitruunoiden määrä.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "muuttaa Header-komponentin toiminnan"

muuttaa Header-komponentin toiminnan -commit