score:1

Accepted answer

this should do the trick (or at least be a start):

import { useeffect, useref, usestate } from "react";
import reactdom from "react-dom";

const input = (props) => {
  const [msg, setmsg] = usestate();
  // the added part
  const ref = useref();
  useeffect(() => {
    if (ref.current.validationmessage) setmsg(ref.current.validationmessage);
  }, [ref]);
  // the added part
  return (
    <div>
      <input
        ref={ref}
        type="number"
        min="1"
        max="10"
        defaultvalue={props.defaultvalue}
        onchange={(event) => setmsg(event.target.validationmessage)}
      ></input>
      <span>{msg}</span>
    </div>
  );
};

const app = () => {
  return (
    <div>
      <label>type 0 below to see the error message</label>
      <input defaultvalue="1" />
      <label>should show error message straight away</label>
      <input defaultvalue="100" />
    </div>
  );
};

reactdom.render(<app />, document.getelementbyid("root"));

codesandbox


remember that target is basically a ref to your input.


Related Query

More Query from same tag