change text of array item in React: undefined is not a function

Question

I want to setup the onChangeText function for a TextInput which is a child element of an array, but I get 'undefined is not a function (evaluating '_this2.props.updatePhoneNumber(text)')'

I'm not sure which part I've done wrong so I just paste my code here. The child item part:

class PhoneInput extends React.Component {    
   render() {
       return ( <FormGroup style={{flexDirection: 'row'}}>
            <TextInput placeHolder="phone" value={this.props.phone.number} 
                onChangeText={(text) => {this.props.updatePhoneNumber(text)}}/>
        </FormGroup>);
   }
}

The father component:

export class RecommendScreen extends React.Component {
    state = {
        phones: [{number: "", id: 1}, {number: "", id: 2}]
    }
    constructor(props) {
        super(props);
        this.updatePhoneNumber = this.updatePhoneNumber.bind(this);
    }
    updatePhoneNumber(id, number) {
        const phones = this.state.phones.slice();
        for (let phone of phones) {
            if (phone.id == id) {
               phone.number = number;
            }
        }
        this.setState({phones: phones});
    }
    render() {
        return (
            <Screen styleName="paper">
                {this.state.phones.map((phone, i) => (
                    <PhoneInput phone={phone} key={phone.id}
                        onChangeNumber={(text) => {this.updatePhoneNumber(phone.id, text)}}
                    />
                ))}
            </Screen>
        );
    }
}

Any ideas?

Answer 1

It's a name mismatch issue, You are passing the function by different name using by different name, From parent you are passing onChangeNumber and in child you are using updatePhoneNumber that's why it is throwing the error.

Use this:

<PhoneInput 
    phone={phone} 
    key={phone.id} 
    updatePhoneNumber = {(text) => this.updatePhoneNumber(phone.id, text)}}
/>

Or Inside child component use onChangeNumber like this:

<TextInput 
     placeHolder = "phone" 
     value = {this.props.phone.number} 
     onChangeText={(text) => this.props.onChangeNumber(text)}/>

Answer 2

In the first line, you just need to pass the function to the child component.

        export class RecommendScreen extends React.Component {
            state = {
                phones: [
                    {
                        number: "",
                        id: 1
                    }, {
                        number: "",
                        id: 2
                    }
                ]
            }
            constructor(props) {
                super(props);
                this.updatePhoneNumber = this.updatePhoneNumber.bind(this);
            }
            updatePhoneNumber(id, number) {
                const phones = this.state.phones.slice();
                for (let phone of phones) {
                    if (phone.id == id) {
                        phone.number = number;
                    }
                }
                this.setState({phones: phones});
            }
            render() {
                return (
                    <Screen styleName="paper">
                        {this.state.phones.map((phone, i) => (<PhoneInput
                                phone={phone}
                                key={phone.id}
                                updatePhoneNumber={this.updatePhoneNumber}/>))}
                    </Screen>
                );
            }
        }

In this component, just call this function and pass the value to it

        class PhoneInput extends React.Component {
            render() {
                return (
                    <FormGroup style={{
                        flexDirection: 'row'
                    }}>
                        <TextInput
                            placeHolder="phone"
                            value={this.props.phone.number}
                            onChange={(e) => {this.props.updatePhoneNumber(e.target.value)
                        }}/>
                    </FormGroup>
                );
            }
        }