React Material-UI Cookbook

There's more...

What if this example could be modified so that you didn't have to store error messages as a state, or have a function to change the helper text of the text field? To do this, you could introduce a new TextField abstraction that handles setting the error property and changes the helperText component when the value is invalid. Here's the new component:

const MyTextField = ({ isInvalid, ...props }) => {  const invalid = isInvalid(props.value);  return (    <TextField      {...props}      error={invalid}      helperText={invalid || props.helperText}    />  );};

Instead of having a function that returns true if the data is valid, the MyTextField component expects an isInvalid() property that returns false if the data is valid and an error message when ...