Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useState } from 'react';

// State lifted to the common parent (TemperatureApp)
function CelsiusInput({ value, onChange }) {
  return (
    <label>
      Celsius:{' '}
      <input
        type="number"
        value={value}
        onChange={e => onChange(Number(e.target.value))}
      />
    </label>
  );
}

function FahrenheitInput({ value, onChange }) {
  return (
    <label>
      Fahrenheit:{' '}
      <input
        type="number"
        value={value}
        onChange={e => onChange((Number(e.target.value) - 32) * 5 / 9)}
      />
    </label>
  );
}

function TemperatureApp() {
  // Single source of truth: temperature in Celsius
  const [celsius, setCelsius] = useState(0);
  const fahrenheit = celsius * 9 / 5 + 32; // derived — not stored in state

return (
    <div>
      <h2>Temperature Converter</h2>
      <CelsiusInput value={celsius} onChange={setCelsius} />
      <br />
      <FahrenheitInput value={fahrenheit} onChange={setCelsius} />
      <p>{celsius.toFixed(1)} °C = {fahrenheit.toFixed(1)} °F</p>
    </div>
  );
}

export default TemperatureApp;