Tietojen välitys komponentille 2

Seuraavaksi toteutamme Booster-nimisen komponentin, jonka rakenne on identtinen edellä lisätyn Balance-komponentin kanssa.

1. Luo components-kansioon uusi Booster.jsx -niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi.

   function Booster(props) {
   
     // Poimitaan komponentille välitetty value-arvo
     const value = props.value;
   
     return (
       <div className="booster">
         {value} lemon / click
       </div>
     );
   
   }
   
   export default Booster;
   

2. Muokkaa src-kansiossa olevaa App.jsx-tiedostoa. Lisää tiedoston alkuun seuraava ohjelmarivi.

   import Booster from './components/Booster';
   

   Muuta komponentin return-lause seuraavan kaltaiseksi:

     return (
       <>
         <div>
           <Balance total="157" />
           <Lemon />
           <Booster value="3.2" />
         </div>  
       </>
     )
   

3. Avaa sovellus selaimessa. Nyt sitruunan alapuolelle on ilmestynyt lemon per click -teksti ja sen edessä on luku. Voit testata komponentin toimintaan vaihtamalla value-määritteen arvoa App.jsx -komponentissa.

   
   
   

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Booster-komponentin"

lisää Booster-komponentin -commit