Elevando estado e criando uma fonte de verdade

import { useState } from 'react';

function CelsiusInput({ value, onChange }) {
  return (
    <label>
      Celsius
      <input
        type="number"
        value={value}
        onChange={(event) => onChange(event.target.value)}
      />
    </label>
  );
}

function TemperaturePreview({ celsius }) {
  const fahrenheit = celsius === '' ? '' : Number(celsius) * 1.8 + 32;
  return <p>Fahrenheit: {fahrenheit === '' ? '-' : fahrenheit.toFixed(1)}</p>;
}

export default function App() {
  const [celsius, setCelsius] = useState('');

  return (
    <main>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <TemperaturePreview celsius={celsius} />
    </main>
  );
}