React material UI form validation using error and helperText

Question

I have created a form on which I want to validate the inputs and I saw the material UI have an attribute called error boleean and another attribute called helperText for TextField 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 here is my code example: https://codesandbox.io/s/material-demo-hip84?file=/demo.js:1020-1055

const [form, setForm] = useState({ name: "", email: "", remember: "" });

  const onChange = i => {
    setForm({ ...form, [i.target.name]: i.target.value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log(form);
    e.target.reset();
  };

  return (
    <form className={classes.root} autoComplete="off" onSubmit={handleSubmit}>
      <Grid container spacing={4}>
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error
                helperText="No Value added in this field"
                id={`input${idx}`}
                label={objKey}
                name={objKey}
                fullWidth={true}
                onChange={onChange}
              />
            </Grid>
          );
        })}
        <Grid item xs={12} sm={12} md={12}>
          <Button type="submit" variant="contained" color="primary">
            Submit
          </Button>
        </Grid>
      </Grid>
    </form>
  );

Answer 1

To use the error prop of the TextField you will need to manage the errors on your own (just like you manage the value for your fields).

To do that - the value of error should not be fixed, but should be true/false, based on some calculation that you are doing.

I used your code to do the checking if the value (for each field) equals specific value. This is not a real-life example, and you probably want to change this to some kind of a regex check, but this should give you a good starting point:

export default function SubmitForm() {
  const classes = useStyles();
  const [form, setForm] = useState({ name: "aaa", email: "bbb", remember: "ccc" });
  const isValidData = {name: "aaa", email: "bbb", remember: "ccc"};

  ...

  const checkIsValid = (fieldName, value) => {
    // Here you probably what to check this to some regex validation
    return isValidData[fieldName] === value;
  }
  
  return (
        ...
        {Object.keys(form).map((objKey, idx) => {
          return (
            <Grid item xs={12} sm={6} md={4} key={idx}>
              <TextField
                error={!checkIsValid(objKey, form[objKey])}
                ...
              />
            </Grid>
          );
        })}
  );
}

To see the complete working example please check this: https://codesandbox.io/s/mui-textfield-control-errors-z0tfo?file=/demo.js