invalid prop value of type number supplied to textinput expected string react native

Question

I am create a word count for a textinput in react native, I think I have been able to achieve the word count, however, when i type into the textinput, I am getting an error of 'invalid prop value of type number supplied to textinput expected string react native'. I have tried everything i can to no avail

        constructor(props) {
          super(props);
          this.state = {
            ModalVisibleStatus: false,
            maxLength: 70,
            charLength: 70,
            messageValue: '',
          };
        }


        onChangeMessage(messageValue) {
          const input = messageValue;
          const charLength = this.state.maxLength - input.length.toString();
          this.setState({
            charLength,
            messageValue: charLength
          });
        }


        <TextInput
          placeholder={placeholder}
          onChangeText={this.onChangeMessage.bind(this)}
          value={this.state.messageValue}
          autoFocus
          autoCorrect
          multiline
          maxLength={this.state.maxLength}
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
        />
        <Text style={{ textAlign: 'right', right: 5, }}>{this.state.messageValue}</Text>

Textinput value you pass is int not string. This could help *onChangeMessage(messageValue) { const input = messageValue; const charLength = this.state.maxLength - input.length.toString(); this.setState({ charLength, messageValue: String(charLength) }); } — Nooruddin Lakhani
I have tried it this way before and I am getting the number value instead of the text i am inputting — vincent O

Pardeep Sharma Pardeep Sharma · Accepted Answer · 2019-09-02T07:23:02

You update state with number value in onChangeMessage function.

There are two way to correct it.

Update Your onChangeMessage function in this way

onChangeMessage(messageValue) { const input = messageValue; const charLength = this.state.maxLength - input.length.toString(); this.setState({ charLength, messageValue: input }); }
Write charLength in ${charLength} this way while updating state.

And I think you are doing something wrong by updating input value with length. you should update input value with what user enter in input field

invalid prop value of type number supplied to textinput expected string react native

1 Answers