title: How to get the initial validation message from Input in React?
body: <p>I have a number input (using Material UI <code>Input</code>) with min max set. If a user types in a number higher than the max, I can get the validation message from <code>event.target.validationMessage</code> during <code>onChange</code> event. This works so far when a user is inputting on an empty number input field.</p>
  <p>Now say I initialised my state with an initial value that is higher than the max already, how and when should I access the <code>event.target.validationMessage</code> as this is before the user input (i.e. no <code>onChange</code> event yet)?</p>
  <p>Here is an example: <a href="https://codesandbox.io/s/cocky-shamir-1fg7h" rel="nofollow noreferrer">https://codesandbox.io/s/cocky-shamir-1fg7h</a></p>
  <pre><code>import { useState } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  
  const Input = (props) =&gt; {
    const [msg, setMsg] = useState();
    return (
      &lt;div&gt;
        &lt;input
          type=&quot;number&quot;
          min=&quot;1&quot;
          max=&quot;10&quot;
          defaultValue={props.defaultValue}
          onChange={(event) =&gt; setMsg(event.target.validationMessage)}
        &gt;&lt;/input&gt;
        &lt;span&gt;{msg}&lt;/span&gt;
      &lt;/div&gt;
    );
  };
  
  const App = () =&gt; {
    return (
      &lt;div&gt;
        &lt;label&gt;Type 0 below to see the error message&lt;/label&gt;
        &lt;Input defaultValue=&quot;1&quot; /&gt;
        &lt;label&gt;Should show error message straight away&lt;/label&gt;
        &lt;Input defaultValue=&quot;100&quot; /&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById(&quot;root&quot;));
  </code></pre>