CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Gummybearicious
Gummybearicious

Reputation: 25

Display multiline error in Materials-UI TextField

So I am trying to add an error string in textfield (from materials UI) and I want the error to display in multiple lines. Currently I have this in my render method:

<TextField
    floatingLabelText={'Input Field'}
    errorText={this.state.errorText}
    type='password'
    onChange={this.foo.bind(this)}
/>

and then the following function present inside the component:

foo(e) {
    let multilineText= `First line!
                      Second line!`;
    this.setState({
        errorText: multilineText,
    });
}

The issue I am having is that the error shows up in the same line. I tried using line breaks such as \n in the string as well but it still displays it in the same line. Is there any particular styling I should apply to have the text display in two separate lines?

Upvotes: 0

Views: 2982

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Instead of assigning a string value you can assign any element, as per DOC:

errorText ------ node ----> The error content to display.

Like this:

<TextField
    floatingLabelText={'Input Field'}
    errorText={error? <div>
                         <div>Hello</div>
                         <div>World</div>
                      </div>
                  : ''
              } 
    type='password'
    onChange={this.foo.bind(this)}
/>

Upvotes: 2

Related Questions