const [value, setValue] = React.useState(prediction);
  return (
    <>
      <input
        type="number"
        value={value}
        onChange={(e) =>
          e.target.checkValidity()
            ? setValue(e.target.valueAsNumber)
            : undefined
        }
      />
      <button
        type="button"
        children={"predict"}
        onClick={() => setPrediction?.(value)}
      />
// 入力欄
import * as React from "react";

type Props = {
  prediction: number;
  onSubmit?: (prediction: number) => void;
  max?: number;
  min?: number;
};

export const Guess = ({
  prediction,
  onSubmit: setPrediction,
  max,
  min
}: Props) => {
  const [value, setValue] = React.useState(prediction);
  return (
    <>
      <input
        type="number"
        value={value}
        max={max}
        min={min}
        placeholder={`from ${min} to ${max}`}
        onChange={(e) =>
          e.target.checkValidity()
            ? setValue(e.target.valueAsNumber)
            : undefined
        }
      />
      <button
        type="button"
        children={"predict"}
        onClick={() => setPrediction?.(value)}
      />
    </>
  );
};