title: React material UI form validation using error and helperText
body: <p>I have created a form on which I want to validate the inputs and I saw the <strong>material UI</strong> have an attribute called <code>error</code> boleean and another attribute called <code>helperText</code> for <code>TextField</code> input of the form but I didn't found nothing about how to inject that error on element when the validation conditon is not fulfiled
  <a href="https://i.stack.imgur.com/6LaNL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6LaNL.png" alt="enter image description here"></a>
  here is my code example: <a href="https://codesandbox.io/s/material-demo-hip84?file=/demo.js:1020-1055" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-hip84?file=/demo.js:1020-1055</a></p>
  
  <pre><code>const [form, setForm] = useState({ name: "", email: "", remember: "" });
  
    const onChange = i =&gt; {
      setForm({ ...form, [i.target.name]: i.target.value });
    };
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
      console.log(form);
      e.target.reset();
    };
  
    return (
      &lt;form className={classes.root} autoComplete="off" onSubmit={handleSubmit}&gt;
        &lt;Grid container spacing={4}&gt;
          {Object.keys(form).map((objKey, idx) =&gt; {
            return (
              &lt;Grid item xs={12} sm={6} md={4} key={idx}&gt;
                &lt;TextField
                  error
                  helperText="No Value added in this field"
                  id={`input${idx}`}
                  label={objKey}
                  name={objKey}
                  fullWidth={true}
                  onChange={onChange}
                /&gt;
              &lt;/Grid&gt;
            );
          })}
          &lt;Grid item xs={12} sm={12} md={12}&gt;
            &lt;Button type="submit" variant="contained" color="primary"&gt;
              Submit
            &lt;/Button&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/form&gt;
    );
  </code></pre>