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 i Bankvarsel | Gjenbrukbare Komponenter og Dataflyt
Introduksjon til React

bookUtfordring: Implementer Betinget Rendering i Bankvarsel

Oppgave: Lage en bankvarsel

La oss arbeide med en bankkonto. Målet er å utvikle en logikk som informerer brukeren om de har tilstrekkelige midler på kortet 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 2. Kapittel 5

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

bookUtfordring: Implementer Betinget Rendering i Bankvarsel

Sveip for å vise menyen

Oppgave: Lage en bankvarsel

La oss arbeide med en bankkonto. Målet er å utvikle en logikk som informerer brukeren om de har tilstrekkelige midler på kortet 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 2. Kapittel 5
some-alt