Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Sfida: Implementazione del Rendering Condizionale – Avviso Bancario | Fondamenti di React e UI Basata su Componenti
React Mastery

bookSfida: Implementazione del Rendering Condizionale – Avviso Bancario

Compito: Creazione di un Avviso Bancario

Lavoriamo con un conto bancario. L'obiettivo è sviluppare una logica che informi l'utente se dispone di fondi sufficienti sulla propria carta per coprire un determinato prezzo. A seconda del risultato, verranno visualizzati messaggi diversi all'utente.

Il compito è:

  • Creare due componenti - App, genitore, e Message, figlio.
  • Il componente genitore (App) trasferisce le props moneyAvailable, price e name.
    1. moneyAvailable - rappresenta la somma di denaro disponibile per l'utente;
    2. price - indica la somma di denaro che l'utente deve pagare;
    3. name - si riferisce al nome dell'utente.
  • Se l'utente ha abbastanza denaro per pagare, viene mostrato il messaggio: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
  • Se l'utente non ha abbastanza denaro per pagare, viene mostrato il messaggio: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.
  1. In React, si utilizza l'operatore ternario condition ? ... : ... per implementare la logica di una dichiarazione if...else.
  2. Per costruire correttamente la stringa,
    • Sostituire il segnaposto user_name con il vero nome dell'utente: prop name;
    • Sostituire il segnaposto calculated_amount_of_money_left con la quantità calcolata di denaro residuo - moneyAvailable - price;
    • Sostituire il segnaposto moneyAvailable con il denaro effettivamente disponibile - prop moneyAvailable;
    • Sostituire il segnaposto price con il prezzo effettivo - prop price.
  3. Utilizzare le parentesi graffe {...} per assegnare un valore che non sia di tipo stringa.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 13

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

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

bookSfida: Implementazione del Rendering Condizionale – Avviso Bancario

Scorri per mostrare il menu

Compito: Creazione di un Avviso Bancario

Lavoriamo con un conto bancario. L'obiettivo è sviluppare una logica che informi l'utente se dispone di fondi sufficienti sulla propria carta per coprire un determinato prezzo. A seconda del risultato, verranno visualizzati messaggi diversi all'utente.

Il compito è:

  • Creare due componenti - App, genitore, e Message, figlio.
  • Il componente genitore (App) trasferisce le props moneyAvailable, price e name.
    1. moneyAvailable - rappresenta la somma di denaro disponibile per l'utente;
    2. price - indica la somma di denaro che l'utente deve pagare;
    3. name - si riferisce al nome dell'utente.
  • Se l'utente ha abbastanza denaro per pagare, viene mostrato il messaggio: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
  • Se l'utente non ha abbastanza denaro per pagare, viene mostrato il messaggio: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.
  1. In React, si utilizza l'operatore ternario condition ? ... : ... per implementare la logica di una dichiarazione if...else.
  2. Per costruire correttamente la stringa,
    • Sostituire il segnaposto user_name con il vero nome dell'utente: prop name;
    • Sostituire il segnaposto calculated_amount_of_money_left con la quantità calcolata di denaro residuo - moneyAvailable - price;
    • Sostituire il segnaposto moneyAvailable con il denaro effettivamente disponibile - prop moneyAvailable;
    • Sostituire il segnaposto price con il prezzo effettivo - prop price.
  3. Utilizzare le parentesi graffe {...} per assegnare un valore che non sia di tipo stringa.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 13
some-alt