Desafío: Implementar Renderizado Condicional en Alerta Bancaria

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,
   • Sustituir el marcador user_name por el nombre real del usuario: prop name;
   • Sustituir el marcador calculated_amount_of_money_left por la cantidad calculada de dinero restante - moneyAvailable - price;
   • Sustituir el marcador moneyAvailable por el dinero disponible real - prop moneyAvailable;
   • Sustituir el marcador price por el precio real - prop price.
3. Utilizar llaves {...} para asignar un valor que no sea de tipo cadena.