Utfordring: Implementer Betinget Rendering i Bankvarsel

Oppgave: Lage en bankvarsel

La oss jobbe med en bankkonto. Målet er å utvikle en logikk som informerer brukeren om de har nok penger på kortet til å dekke en gitt pris. Avhengig av resultatet, skal vi vise ulike meldinger til brukeren.

Oppgaven er:

• Lag to komponenter – App, forelder, og Message, barn.
• Forelderen (App) sender propene moneyAvailable, price og name.

1. moneyAvailable – representerer beløpet brukeren har;
2. price – angir beløpet brukeren må betale;
3. name – refererer til brukerens navn.

• Hvis brukeren har nok penger til å betale, vis meldingen: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Hvis brukeren ikke har nok penger til å betale, vis meldingen: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. I React bruker vi den ternære operatoren condition ? ... : ... for å implementere logikken til en if...else-setning.
2. For å sette sammen strengen riktig,
   • Bytt ut plassholderen user_name med faktisk brukernavn: name-prop;
   • Bytt ut plassholderen calculated_amount_of_money_left med det beregnede beløpet som er igjen – moneyAvailable - price;
   • Bytt ut plassholderen moneyAvailable med faktisk tilgjengelig beløp – moneyAvailable-prop;
   • Bytt ut plassholderen price med faktisk pris – price-prop.
3. Bruk krøllparenteser {...} for å tilordne en verdi som ikke er av typen streng.