How to use Material-ui@next TextField error props

Question

I want to use Material-UI Next textfield error props link, the props type is boolean. The previous version of Material-UI props name is errorText and the props type is node link.

Textfield Material-UI previous version using errorText props :

<TextField
  name='name'
  floatingLabelText='Name'
  hintText='Type your name'
  value={this.state.fields.name}
  onChange={this.onChange}
  errorText={this.state.error}
/>

With errorText in Material-UI previous version, the code works good for displaying an error state.

Textfield Material-UI Next using error props:

<TextField
  name='name'
  label='Name'
  placeholder='Type your name'
  value={this.state.fields.name}
  onChange={this.onChange}
  error={true} //only accept true or false value
/>

On Material-UI Next errorText props changed to error with boolean type and only accept true or false value. If i set the error props to true, the textfield displaying error state at any time. I just want to displaying error state under certain conditions.

How can i use error state this.state.error on Material-UI Next textfield?

Why don't you keep the error condition in the component state? — galah92, Mar 22 '18 at 09:36
Exactly. I'm using a variant of `value={this.state.value}` and `error={this.state.value === ""}`. — galah92, Mar 22 '18 at 10:12
@galah92 with `value={this.state.value}` and `error={this.state.value === ""}` it not shown an error message, i tried to use `error={this.state.error}` but nothing happens. I want to show an error message with red text color if error happens. As use `errorText` property at the previous version of material-ui. — Ras, Mar 22 '18 at 11:18

galah92 · Accepted Answer · 2018-06-10T05:17:27.953

93

Using a react component state, one can store the TextField value and use that as an indicator for an error. Material-UI exposes the error and helperText props to display an error interactively.

Take a look at the following example:

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

edited Jun 10 '18 at 05:17

answered Mar 22 '18 at 11:26

galah92

3,621
2
29
55

1

With MUI 3, helperText requires a React Node – Wilk Sep 28 '18 at 06:56

score 6 · Answer 2 · answered May 08 '20 at 02:23

I add an example that does not shows an error when the value is empty and validates a regular expression (MAC Address).

<TextField id="macAddress" label="MAC Address" name="macAddress"
  value={this.state.macAddress}
  onChange={this.handleChange}
  error={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$")}
  helperText={this.state.macAddress !== "" && !this.state.macAddress.match("^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$") ? 'MAC Address must be a 6-bytes string.' : ' '}
/>

How to use Material-ui@next TextField error props

2 Answers2

Linked