React Material-UI Cookbook

How it works...

Let's start by taking a look at the state of the ValidationAndErrorDisplay component:

const [inputs, setInputs] = useState([  {    id: 'phone',    label: 'Phone',    placeholder: '999-999-9999',    value: '',    error: false,    helperText: 'Any valid phone number will do',    getHelperText: error =>      error        ? 'Woops. Not a valid phone number'        : 'Any valid phone number will do',    isValid: value =>      /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/.test(        value      )  },  {    id: 'email',    label: 'Email',    placeholder: '[e-mail]',    value: '',    error: false,    helperText: 'Any valid email address will do',    getHelperText: error =>      error        ? 'Woops. Not a valid email address'        : 'Any valid email address will do', isValid: value => /\S+@\S+\.\S+/.test(value) ...