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, diferentes mensagens serão exibidas 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 disponível 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, exibir 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, exibir a mensagem: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

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