How to add two states to my component inputText in OnChangeText

I need to add two parameters to my onChangeText, but I don’t know how I can do that,

My component is:

handleChangePhone = (value) => {
    this.setState(prevState => ({ phone: normalizePhone(value, prevState.phone) }))
}
handleChangeDDD = (value) => {
    this.setState(prevState => ({ ddd: normalizeDDD(value, prevState.phone) }))
}
setPasswordVisibility = () => {
    this.setState({ hidePassword: !this.state.hidePassword })
}

render() {
    const { value, onChangeValue } = this.props;
    return (
        <>
            <TextInput
                {...this.props}
                onChangeText={onChangeValue, this.props.phone ? this.handleChangePhone : this.props.ddd ? this.handleChangeDDD : onChangeValue}
                value={value}
                defaultValue={this.props.phone ? this.state.phone : this.props.ddd ? this.state.ddd : ''}
                placeholder={this.props.placeholder ? this.props.placeholder : ''}
                selectionColor='#6730EC'
                keyboardType={this.props.keyboard ? this.props.keyboard : 'default'}
                maxLength={this.props.maxLen ? this.props.maxLen : 100}
                style={[styles.input,
                {
                    width: this.props.width ? this.props.width : 244,
                    marginLeft: this.props.marginL ? this.props.marginL : 0,
                    marginRight: this.props.marginR ? this.props.marginR : 0,
                    marginTop: this.props.marginT ? this.props.marginT : 0,
                    textAlign: this.props.alignText ? this.props.alignText : 'left',
                    fontSize: this.props.fontSize ? this.props.fontSize : 15,
                }]}
                secureTextEntry={this.props.type == 'security' ? this.state.hidePassword : false}
                ref={(input) => this.props.inputRef && this.props.inputRef(input)}
                autoFocus={this.props.focus ? this.props.focus : false}
            //onSubmitEditing={this.handleTitleInputSubmit}
            />
            <Feather style={[styles.eye,
            {
                marginTop: this.props.marginT ? this.props.marginT : 0,
            }]}
                name={(this.state.hidePassword) ? 'eye' : 'eye-off'}
                size={this.props.eye ? 24 : 0}
                color="#6730EC"
                onPress={this.setPasswordVisibility}
            />
        </>

The functions HandleDDD and Handle CelNumber are call where my param phone is true, but i need this change state with my onChangeValue aways, but the way I did, not work

can you help me?

Answer

From on your code, it seems like:

• you get props value and onChangeValue from this.props
• the TextInput represents either a phone number or a DDD
• we know whether it’s a phone number or a DDD based on if this.props includes phone or ddd

Based on those points, I don’t actually think that you need to be storing your input value in the state for this component. This can be a controlled component where you call back to this.props.onChangeValue on every change.

I don’t know what your functions normalizePhone and normalizeDDD are doing. It’s possible that you only want to call back to the parent when you get a value that passes validation. But that is incompatible with what I’m seeing here which is that you are setting the value for the TextInput to this.props.value.

handleChangeText = (text) => {
    const prevText = this.props.value;
    const normalized = this.props.phone
      ? normalizePhone(text, prevText)
      : this.props.ddd
      ? normalizeDDD(text, prevText)
      : text;
    this.props.onChangeValue(normalized);
  };

  render() {
    return (
      <>
        <TextInput
          {...this.props}
          onChangeText={this.handleChangeText}
          value={this.props.value}
          defaultValue={""}
....