pass a function to child component react native

Question

i try to pass onChangeText() to a child component in react native,its worked :

onChangText(value){
    console.log(value)
}

render() {

    return (

        <View style={{flex:1}}>
            <Ui  
                onChangeText={this.onChangText()}  
            />
        </View>
    )
}

but when i call other function's(in parent) like below:

loger(value){
    console.log(value)
}
onChangText(value){
    this.loger(value)
}

render() {

    return (

        <View style={{flex:1}}>
            <Ui  
                onChangeText={this.onChangText()}
            />
        </View>  
    )
}

i got error: this.loger is not a function

score 1 · Accepted Answer · answered Sep 27 '18 at 07:24

Two things you need to take care of

First, while passing the function to child, you need not invoke it and just pass the reference like

 <Ui  
      onChangeText={this.onChangText}
 />

Second, whenever you need to use this keyword inside the called function, you should bind the function to the correct context. In your case, you need to bind it to the context of the parent class and hence you can use arrow functions for that purpose

onChangText = (value) => {
    this.loger(value)
}

score 0 · Answer 2 · answered Sep 27 '18 at 07:36

i fix that by passing my function in body of an arrow function like below:

loger(value){
    console.log(value)
}
onChangeText(value){
    this.loger(value)
}

render() {

    return (
        <View style={{flex:1}}>
            <Ui 
                onChangeText={(value)=> this.onChangeText(value)}
            />
        </View>

    )
}

pass a function to child component react native

2 Answers2