Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Implementer Betinget Rendering – Bankvarsel | Grunnleggende om React og Komponentbasert Brukergrensesnitt
React Mastery

bookUtfordring: Implementer Betinget Rendering – Bankvarsel

Oppgave: Lage en bankvarsel

Vi skal arbeide med en bankkonto. Målet er å utvikle en logikk som informerer brukeren om de har tilstrekkelige midler på kortet sitt til å dekke en gitt pris. Avhengig av resultatet vil vi vise ulike meldinger til brukeren.

Oppgaven er:

  • Lag to komponenter – App, forelder, og Message, barn.
  • Forelderen (App) overfører propsene 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 å konstruere strengen korrekt,
    • Bytt ut plassholderen user_name med faktisk brukernavn: name-prop;
    • Bytt ut plassholderen calculated_amount_of_money_left med beregnet beløp 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.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 13

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain how the ternary operator is used in this context?

What props should I pass to the Message component?

Can you clarify how to calculate the remaining balance?

Awesome!

Completion rate improved to 2.17

bookUtfordring: Implementer Betinget Rendering – Bankvarsel

Sveip for å vise menyen

Oppgave: Lage en bankvarsel

Vi skal arbeide med en bankkonto. Målet er å utvikle en logikk som informerer brukeren om de har tilstrekkelige midler på kortet sitt til å dekke en gitt pris. Avhengig av resultatet vil vi vise ulike meldinger til brukeren.

Oppgaven er:

  • Lag to komponenter – App, forelder, og Message, barn.
  • Forelderen (App) overfører propsene 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 å konstruere strengen korrekt,
    • Bytt ut plassholderen user_name med faktisk brukernavn: name-prop;
    • Bytt ut plassholderen calculated_amount_of_money_left med beregnet beløp 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.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 13
some-alt