Unit Converter - km/mile

function ConvertDistance() {
      const [distance, setDistance] = React.useState(0);
      const [invert, setInvert] = React.useState(false);
      const onChange = (event) => {
        setDistance(event.target.value);
      };
      const reset = () => setDistance(0);
      const inverted = () => {
        reset();
        setInvert((current) => !current);
      };

      return (
        <div>
          <h3>Time Converter</h3>
          <div>
            <label htmlFor="kilometer">kilometer</label>
            <input
              value={invert ? distance * 1.621371 : distance}
              onChange={onChange}
              id="kilometer"
              placeholder="kilometer"
              type="number"
              disabled={invert}
            ></input>
          </div>
          <div>
            <label htmlFor="mile">mile</label>
            <input
              value={invert ? distance : distance * 0.621371}
              onChange={onChange}
              type="number"
              id="mile"
              placeholder="mile"
              disabled={!invert}
            ></input>
          </div>
          <button onClick={reset}>reset</button>
          <button onClick={inverted}>
            {inverted ? "use mile" : "use kilometer"}
          </button>
        </div>
      );
    }

혼자서도 잘만드러영>_< 꺄하하하

function App() {    
      const [index, setIndex] = React.useState("0");
      const onSelect = (event) => {
        setIndex(event.target.value);
      };

      return (
        <div>
          <h1>Unit Converter</h1>
          <h3>Please select the option</h3>
          <select value={index} onChange={onSelect}>
            <option value="0">Hours & Minutes</option>
            <option value="1">Km & Miles</option>
          </select>
          {index === "0" ? <ConvertTime /> : null}
          {index === "1" ? <ConvertDistance /> : null}
        </div>
      );
    }
    root.render(<App />);

여기따 APP에도 useState사용으로 value값을 지닌 option값에 따라 화면 전환 가능하게! 끄읕-! 이-지 ㅋㅋ
[결과물]