Haaste: Toteuta Ehdollinen Renderöinti Pankkihälytyksessä

Tehtävä: Pankkihälytyksen luominen

Työskentelemme pankkitilin kanssa. Tavoitteena on kehittää logiikka, joka ilmoittaa käyttäjälle, onko hänen kortillaan tarpeeksi varoja tietyn hinnan kattamiseen. Tuloksen perusteella näytämme käyttäjälle erilaisia viestejä.

Tehtävä:

• Luo kaksi komponenttia - App (vanhempi) ja Message (lapsi).
• Vanhempi komponentti (App) välittää propseina moneyAvailable, price ja name.
  1. moneyAvailable - kuvaa käyttäjän käytettävissä olevaa rahamäärää;
  2. price - tarkoittaa summaa, joka käyttäjän täytyy maksaa;
  3. name - viittaa käyttäjän nimeen.
• Jos käyttäjällä on tarpeeksi rahaa maksamiseen, näytetään viesti: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Jos käyttäjällä ei ole tarpeeksi rahaa, näytetään viesti: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. Reactissa käytetään ternääristä operaattoria condition ? ... : ... toteuttamaan if...else-logiikkaa.
2. Merkkijonon muodostamiseksi oikein,
   • Korvaa paikkamerkki user_name todellisella käyttäjän nimellä: name-prop;
   • Korvaa paikkamerkki calculated_amount_of_money_left lasketulla jäljelle jäävällä rahamäärällä - moneyAvailable - price;
   • Korvaa paikkamerkki moneyAvailable todellisella käytettävissä olevalla rahamäärällä - moneyAvailable-prop;
   • Korvaa paikkamerkki price todellisella hinnalla - price-prop.
3. Käytä aaltosulkuja {...} asettaaksesi arvon, joka ei ole merkkijono.