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?

in PhoneInput, updatePhoneNumber is not a prop. onChangeNumber is but it is not defined anyway. — Dez
– Dez, Commented May 5, 2017 at 9:56
@Dez thanks for your fast reply. you are right, a silly mistake. 'this.props.updatePhoneNumber' should be 'this.props.onChangeNumber' — meteoriteliu
– meteoriteliu, Commented May 5, 2017 at 10:00

Simonov Dmitry · Accepted Answer · 2017-05-05 10:00:26Z

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>
                );
            }
        }

Mayank Shukla · Accepted Answer · 2017-05-05 10:03:24Z

0

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)}/>

answered May 5, 2017 at 10:03

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

1 Comment

meteoriteliu Over a year ago

Thank you, you are very helpful.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related