How can I display different error messages on my MUI input field?-CodePudding

I have a form input field that displays an error if the user tries to submit while empty, but I also want to show a different error message is the input is not unique, I currently have this

<FormTextField
    className={classes.nameInput}
    errorMessages={[handleErrorMessage()]}
    label="Recipe Name"
    id="recipe-name"
    isRequired
    name="name"
    onChange={handleChange}
    placeholder="Recipe name"
    validators={['required']}
    value={slug}
    autoFocus
/>

This is MUI v4

CodePudding user response：

first solution:

you can use snackbar that found in material ui document:

https://v4.mui.com/components/snackbars/

and u can put one or more than one message

second solution:

maybe this post will help u, It is very close to your question:

https://stackoverflow.com/questions/49421792/how-to-use-material-uinext-textfield-error-props

you can put like this example:

<TextField
  value={this.state.text}
  onChange={event => this.setState({ text: event.target.value })}
  error={text === ""}
  helperText={text === "" ? 'Empty field!' : ' '}
/>