TextInput length counter in react-native - react-native

Question

I have a TextInput with maxLength 100 in my scene, and I want to add a counter below which shows something like "38/100", auto-updating with 'onChangeText'.
So I have to figure out the length of the input value, somehow store it in this.state.textLength while storing the value itself to this.state.text, but I don't know how to do this in "onChangeText = {(text) => ...}" function.
Here is my simplified code:
export class RequestScene extends Component {
constructor() {
super();
this.state={
text: '',
textLength: 0,
category: '',
time: ''
};
}
render(){
return(
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
height: 200
}}>
<TextInput style={{
height: 200,
width: 360,
borderColor: 'lightgray',
borderWidth: 1,
padding: 3,
borderRadius: 3,
fontSize: 24}}
maxLength={100}
placeholder='무슨 상황인지 간단하게 써주세요'
multiline={true}
// this is where I am stuck. What should I do with 'textLength'?
onChangeText={
(text)=>this.setState({text})
(text)=>this.setState({textLength})
}
/>
<Text style={{
fontSize:10,
color:'lightgrey',
textAlign: 'right'
}}>
// currently this counter only shows '0/100'
{this.state.textLength}/100
</Text>

Answer 1

The onChangeText() function returns a string. You can do something like:
const maxLength = 100;
this.setState({
textLength: maxLength - text.length,
text, // same as `text: text`
});

Answer 2

To make your code easier to read, you can call a separate method within your onChangeText handler which updates textLength the following way:
export class RequestScene extends Component {
constructor() {
super();
this.maxLength = 100;
this.state={
textLength: 0,
};
}
onChangeText(text){
this.setState({
textLength: this.maxLength - text.length
});
}
render(){
return (
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{
height: 200
}}>
<TextInput style={{
height: 200,
width: 360,
borderColor: 'lightgray',
borderWidth: 1,
padding: 3,
borderRadius: 3,
fontSize: 24}}
maxLength={100}
placeholder='무슨 상황인지 간단하게 써주세요'
multiline={true}
onChangeText={this.onChangeText.bind(this)}
/>
<Text style={{
fontSize:10,
color:'lightgrey',
textAlign: 'right'
}}>
// currently this counter only shows '0/100'
{this.state.textLength}/100
</Text>
</View>
</View>
);
}
}

Answer 3

To get length of input field try
handleEmailOtp = emailOtpString => {
this.setState({emailOtp: emailOtpString});
const otpLength = emailOtpString.length.toString(); //here
otpLength == 6
? this.setState({otpTyped: true})
: this.setState({otpTyped: false});
};

Answer 4

import React, { Component } from 'react'
import { View, Text, TextInput } from 'react-native'
export default class App extends Component {
state = {
text: ''
}
render() {
return (
<View style={{ padding: 10 }}>
<TextInput style={{ borderWidth: 1 }} numberOfLines={3} maxLength={100} multiline={true} onChangeText={(text) => this.setState({ text: text })} />
<Text>{100 - this.state.text.length}/100 Characters</Text>
</View>
)
}
}