jms080809/gist:45db16e92fbe7bb67a2c44098b1f8dd0

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/@babel/standalone/babel.min.js"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="text/babel">
    const root = document.getElementById("root");

    function App() {
      const [state, setState] = React.useState(0);
      const [flip, setFlip] = React.useState(false);

      const onChange = (e) => {
        setState((curr) => (curr = e.target.value));
      };
      const onChange2 = (e) => {
        setState((curr) => (curr = e.target.value * 1000));
      };
      const reset = (e) => {
        setState((curr) => (curr = 0));
      };
      const onFlip = () => {
        if (flip) {
          setFlip(false);
        } else {
          setFlip(true);
        }
      };
      return (
        <div>
          <h1>M & KM Converter</h1>
          <input
            type="number"
            id="meter"
            placeholder="meter"
            value={state}
            onChange={onChange}
            disabled={flip}
          />
          <label for="minutes">m</label>
          <input
            type="number"
            id="kilometers"
            placeholder="kilometers"
            value={state / 1000}
            disabled={!flip}
            onChange={onChange2}
          />
          <label for="kilometers">km</label>

          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script
	crossorigin
	src="https://unpkg.com/react@17/umd/react.development.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/@babel/standalone/babel.min.js"
	></script>
	<title>Document</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	<script type="text/babel">
	const root = document.getElementById("root");

	function App() {
	const [state, setState] = React.useState(0);
	const [flip, setFlip] = React.useState(false);

	const onChange = (e) => {
	setState((curr) => (curr = e.target.value));
	};
	const onChange2 = (e) => {
	setState((curr) => (curr = e.target.value * 1000));
	};
	const reset = (e) => {
	setState((curr) => (curr = 0));
	};
	const onFlip = () => {
	if (flip) {
	setFlip(false);
	} else {
	setFlip(true);
	}
	};
	return (
	<div>
	<h1>M & KM Converter</h1>
	<input
	type="number"
	id="meter"
	placeholder="meter"
	value={state}
	onChange={onChange}
	disabled={flip}
	/>
	<label for="minutes">m</label>
	<input
	type="number"
	id="kilometers"
	placeholder="kilometers"
	value={state / 1000}
	disabled={!flip}
	onChange={onChange2}
	/>
	<label for="kilometers">km</label>

	<button onClick={reset}>Reset</button>
	<button onClick={onFlip}>Flip</button>
	</div>
	);
	}
	ReactDOM.render(<App />, root);
	</script>
	</html>