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

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

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

Answer 2

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