Tarea: Crear una Alerta Bancaria

Trabajemos con una cuenta bancaria. El objetivo es desarrollar una lógica que informe al usuario si dispone de fondos suficientes en su tarjeta para cubrir un precio determinado. Dependiendo del resultado, se mostrarán diferentes mensajes al usuario.

La tarea es:

• Crear dos componentes: App, como componente padre, y Message, como componente hijo.
• El componente padre (App) transfiere las props moneyAvailable, price y name.
  1. moneyAvailable - representa la cantidad de dinero que tiene el usuario;
  2. price - indica la cantidad de dinero que el usuario necesita pagar;
  3. name - se refiere al nombre del usuario.
• Si el usuario tiene suficiente dinero para pagar, se muestra el mensaje: Success! The remaining amount of money for <user_name> is: <calculated_amount_of_money_left>. Thank you!.
• Si el usuario no tiene suficiente dinero para pagar, se muestra el mensaje: Failure! The bank account balance for <user_name> is: <moneyAvailable>. Unfortunately, you need to pay: <price>.

1. En React, se utiliza el operador ternario condition ? ... : ... para implementar la lógica de una sentencia if...else.
2. Para construir la cadena correctamente,
   • Reemplazar el marcador de posición user_name por el nombre real del usuario: prop name;
   • Reemplazar el marcador de posición calculated_amount_of_money_left por la cantidad calculada de dinero restante - moneyAvailable - price;
   • Reemplazar el marcador de posición moneyAvailable por el dinero disponible real - prop moneyAvailable;
   • Reemplazar el marcador de posición price por el precio real - prop price.
3. Utilizar llaves {...} para asignar un valor que no sea de tipo string.