How to set a limit on the input characters?

There is a field you which characters are being entered. How to make so that when user enters less than 6 characters he was given a message about this?

constructor(props) {
super(props);
 this.showText = this.showText.bind(this);
 this.showText2 = this.showText2.bind(this);
};

 showText2(e) {
 this.setState({ text2: e.target.value });
}

 <input defaultValue={this.showText} onInput={this.showText2} />
April 4th 20 at 13:07
1 answer
April 4th 20 at 13:09
Here even react is not needed. You can simply add the html5 attribute
<input type="text" name="name" minlength="6" maxlength="10" size="10">


UPD
And of course you can add event onBlur
constructor(props) {
super(props);
 this.showText = this.showText.bind(this);
 this.showText2 = this.showText2.bind(this);
};

 showText2(e) {
 this.setState({ text2: e.target.value });
}

 onFocusOff = (e) => {
 if(this.state.text2.length < 6){
 this.setState({ alert: "at least 6 characters" });
}
}

 <input defaultValue={this.showText} onBlur={this.onFocusOff} onInput={this.showText2} />
 {this.state.alert && <p>{this.state.alert}</p>}
The essence of the problem to make it so that if a user enters less than 6 characters, the screen had displayed a message about it. Task training)) the Problem is that the field I created and the characters display even can, but just can't figure out how to register in this case, the limit on the number of output symbols - Germaine.Volkm commented on April 4th 20 at 13:12
@Germaine.Volkm,
return (
...
 <input defaultValue={this.showText} onInput={this.showText2} />
 {this.showText2.length < 6 && <MyWarningMessage />}
);
- Daron.Wehner53 commented on April 4th 20 at 13:15

Find more questions by tags React