Tarefa: Criando um Alerta Bancário

Vamos trabalhar com uma conta bancária. O objetivo é desenvolver uma lógica que informe ao usuário se ele possui saldo suficiente em seu cartão para cobrir um determinado valor. Dependendo do resultado, exibiremos mensagens diferentes ao usuário.

A tarefa é:

• Criar dois componentes - App, pai, e Message, filho.
• O componente pai (App) transfere as props moneyAvailable, price e name.
  1. moneyAvailable - representa o valor de dinheiro que o usuário possui;
  2. price - indica o valor que o usuário precisa pagar;
  3. name - refere-se ao nome do usuário.
• Se o usuário tiver dinheiro suficiente para pagar, mostramos a mensagem: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Se o usuário não tiver dinheiro suficiente para pagar, mostramos a mensagem: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. No React, utilizamos o operador ternário condition ? ... : ... para implementar a lógica de uma instrução if...else.
2. Para construir a string corretamente,
   • Substitua o placeholder user_name pelo nome real do usuário: prop name;
   • Substitua o placeholder calculated_amount_of_money_left pelo valor calculado do dinheiro restante - moneyAvailable - price;
   • Substitua o placeholder moneyAvailable pelo valor real disponível - prop moneyAvailable;
   • Substitua o placeholder price pelo valor real do preço - prop price.
3. Utilize chaves {...} para atribuir um valor que não seja do tipo string.