title: Why setCustomValidity() not working in React app?
body: <p>Why <code>setCustomValidity()</code> doesn't work in React? Am I missing something? With vanillia HTML and JS works fine. Or there is other way to easily make something similiar to <code>setCustomValidity</code>?</p>
  
  <p>React code:</p>
  
  <pre><code>class Form extends React.Component {
    formVal(e) {
      e.target.setCustomValidity("Test_1");
    }
    formVal2() {
      let inpt = document.getElementById("input");
      inpt.target.setCustomValidity("TEST_2");
    }
    render() {
      return (
        &lt;div&gt;
          &lt;form&gt;
            &lt;input
              id="input"
              type="datetime-local"
              onBlur={this.formVal}
            /&gt;
          &lt;/form&gt;
          &lt;button onClick={this.formVal2}&gt;Click &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/vZPyVJ" rel="noreferrer" title="CodePen">CodePen - React</a></p>
  
  <p>With no React:</p>
  
  <pre><code>&lt;form&gt;
    &lt;input type="email" id="mail" name="mail"&gt;
    &lt;button onclick="test()"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>// JS</p>
  
  <pre><code>var input = document.getElementById("mail");
  function test() {
   input.setCustomValidity("test")
  }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/gRELZv" rel="noreferrer" title="Code Pen - no React">CodePen - no React</a></p>