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?

Answer 1

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!' : ' '} /> 

Answer 2

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.' : ' '} />