How to get the initial validation message from Input in React? - reactjs

Question

I have a number input (using Material UI Input) with min max set. If a user types in a number higher than the max, I can get the validation message from event.target.validationMessage during onChange event. This works so far when a user is inputting on an empty number input field.
Now say I initialised my state with an initial value that is higher than the max already, how and when should I access the event.target.validationMessage as this is before the user input (i.e. no onChange event yet)?
Here is an example: https://codesandbox.io/s/cocky-shamir-1fg7h
import { useState } from "react";
import ReactDOM from "react-dom";
const Input = (props) => {
const [msg, setMsg] = useState();
return (
<div>
<input
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"));

Answer 1

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.