title: React MaterialUI - Set error on TextField Component after button is clicked
body: <p>I have an input form that I want to validate the input fields of once a 'search' button is clicked.</p>
  
  <p>Most answers I have seen are having the input validated live, as the user enters it into the form.<br>
  I don't want to do this as some of the validation I need to do is a costly operation (validating an API key for example), therefore constantly checking it as it's entered is not an option.<br>
  This is also a serverless, single page application, and as far as I could tell - <code>onSubmit</code> would reload the page, so I'm not using that.</p>
  
  <p>I have a simple form that looks similar to this:</p>
  
  <pre><code>    const [formData, setFormData] = useState({});
      .......
      function handleFormChange(event) {
          let data = formData;
          data[event.target.name] = event.target.value;
          setFormData(data);
      }
      ........
      &lt;form id="search-form" &gt;
         &lt;TextField name="apiKey" label="API Key" onChange={handleFormChange} defaultValue={formData.apiKey} /&gt;
         &lt;TextField name='itemName' label="Enter Item" onChange={handleFormChange} /&gt;
         &lt;Button name='search-button' onClick={validate} &gt;Search&lt;/Button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>I can't work out what to put into <code>validate()</code> to either set the errors on the text fields or perform the search.
  I've tried passing a function into the <code>error</code> prop that checks to see if an <code>errors</code> state variable is populated, I've tried looking into using refs to set the error state but I couldn't see any function that would set the error state.</p>
  
  <p>The formData variable will hold the current data, so it's easy to check 'is this data valid' but for the life of me, I can't work out how to manually trigger the error state.</p>
  
  <p><em>I'm using React hooks FYI</em></p>