Reto: conversor de Celsius a Fahrenheit

El reto #

Crea un componente que reciba una temperatura en grados Celsius y muestre esa temperatura junto a su equivalente en Fahrenheit. Usa una prop numérica y escribe las unidades para que se entienda cada valor.

La fórmula es: Fahrenheit = Celsius × 9 / 5 + 32. Por ejemplo, 0 °C equivale a 32 °F y 100 °C equivale a 212 °F.

Antes de consultar la solución, intenta cumplir estos requisitos:

• Recibir una prop grados de tipo number.
• Mostrar Celsius y Fahrenheit con sus unidades.
• Utilizar 30 °C cuando la prop se omita.
• Reutilizar el componente con temperaturas distintas.

Solución explicada #

1interface Props {
2  grados?: number;
3}
4
5function Conversor({ grados = 30 }: Props) {
6  const toFahrenheit = (celsius: number) => celsius * 9 / 5 + 32;
7
8  return (
9    <p>
10      {grados} °C / {toFahrenheit(grados)} °F
11    </p>
12  );
13}
14
15export default function Ejercicio_01() {
16  return (
17    <>
18      <Conversor grados={32} />
19      <Conversor grados={0} />
20      <Conversor />
21    </>
22  );
23}

El signo ? hace opcional la prop y permite escribir <Conversor /> en TypeScript. La desestructuración aplica el valor por defecto de 30. Si escribimos grados={0}, se conserva cero: un valor por defecto no sustituye los números que ya hemos pasado.

El resultado para 32 °C es 89.6 °F. No necesitas useState: Fahrenheit se puede calcular directamente a partir de la prop. Guardar ambos valores en estados separados añadiría datos que podrían dejar de coincidir.

Comprueba tu solución #

Prueba 0 °C, 100 °C y −40 °C. Los resultados deben ser 32 °F, 212 °F y −40 °F. El componente sin prop debe mostrar 30 °C / 86 °F.

Como ampliación, muestra Fahrenheit con una cifra decimal utilizando toFixed(1). Ese método devuelve texto formateado, adecuado para mostrar el resultado.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.