Why the function argument returns undefined when using props?

Question

I am building an app using react-native. I have 3 components namely Ind.js, Buttons.js, Rain.js. I am required to select an option in Rain and save it in the state of Ind for further processing. Since Rain component is not directly related to Ind but is connected via a navigation route in Buttons. I am using react-navigation.

To do so I created a function onSelect() in Ind which does the setState and passed it to Buttons via props and passed again to Rain then I executed the function, the problem is the function is getting called but no parameters are passed ie, it console.logs null then undefined.

I have tried to console.log the parameters that are passed to Ind.

Ind.js

export default class Ind extends Component {
constructor(){
super();
this.state = { report: null}
}
onSelect = (newreport) => {
      this.setState({
        report: newreport
      })
      console.log("Parameter: ", newreport)
      console.log("State: ", this.state.report)
    }

render(){
return(
<Buttons selectReport={() => this.onSelect()}
)

}

}

Buttons.js

export default class Buttons extends Component{
constructor(props){
super(props);
}
render(){
return(
<TouchableOpacity
    onPress={() => {this.props.navigation.navigate('Rain',{
                  selectReport: this.props.selectReport });
                }}>
          <Text style={styles.text}>Rain</Text>
 </TouchableOpacity>
)
}
}

Rain.js

export default class Rain extends Component{
constructor(props){
super(props);
this.state = {
selection: "Test"
}
this.selectOption = this.selectOption.bind(this);
}
selectOption = () => {
this.props.navigation.state.params.selectReport(this.state.selection)
}
}

The console log return first Parameter: undefined State: null which is understandable because nothing is clicked but after clicking it shows Parameter: undefined State: undefined. What is happening? I am a beginner and is there something wrong in binding or sending the props? Please Explain.

hong developer · Answer 1 · 2019-07-18T08:46:13.517

1

You didn't put any parameters in the click button. However, the function is receiving parameters as values. Of course it points to undefind.

onSelect = (newreport) => {
      this.setState({
        report: newreport
      })
      console.log("Parameter: ", newreport)
      console.log("State: ", this.state.report)
    return this.state.report;
    }

render(){
return(
<Buttons selectReport={this.onSelect("value")}
)

edited Jul 18 '19 at 08:46

answered Jul 18 '19 at 08:12

hong developer

13,291
4
38
68

When I do this ... and click the `Touchable opacity` button it says `this.props.navigation.state.params.selectreport` is not a function ? – random_user Jul 18 '19 at 08:19
@random_user There is no result value in your function. Please enter the result as my answer. – hong developer Jul 18 '19 at 08:23
I did what your answer stated.. still the above error – random_user Jul 18 '19 at 08:26

ravibagul91 · Accepted Answer · 2019-07-18T08:33:11.103

1

When working with arrow function, you need to call like,

<Buttons selectReport={() => this.onSelect} > //without parenthesis

also setState is async so you need to use callback in setState to print value.

You need to do this,

export default class Ind extends Component {
  constructor(){
   super();
   this.state = { report: null}
  }
  onSelect = (newreport) => {
      console.log("Parameter: ", newreport)
      this.setState({
        report: newreport
      },()=> console.log("State: ", this.state.report)) //prints in callback
  }

  render(){
   return(
    <Buttons selectReport={() => this.onSelect}>
   )
  }
}

edited Jul 18 '19 at 08:33

answered Jul 18 '19 at 08:23

ravibagul91

20,072
5
36
59

When I use ` this.onSelect}` it works. Why? – random_user Jul 18 '19 at 08:30
` this.onSelect}` bind `this` automatically. – ravibagul91 Jul 18 '19 at 08:35
Why it so confusing .... I am having difficulties with `binding`. can you direct to some resources? – random_user Jul 18 '19 at 08:41
and also what about the parameters ? that was mentioned in another answer? – random_user Jul 18 '19 at 08:42
That parameter was static in another answer. When you pass a function to child component and expect a param from child then you don't need parenthesis and from child you can pass param. – ravibagul91 Jul 18 '19 at 08:53
Refer this when to use arrow function and how- https://reactjs.org/docs/faq-functions.html – ravibagul91 Jul 18 '19 at 08:55
What about the parameters that are needed as stated by another answer? – random_user Jul 18 '19 at 14:07
That parameter is just a static value, when you pass value from child to parent it won't replace that value and you will get wrong value in parent. – ravibagul91 Jul 18 '19 at 14:09

score 0 · Answer 3 · answered Jul 18 '19 at 08:05

0

setState is async function so that's why after the first click you get null (because it didn't change yet) however somewhere in your code passing value of newreport is wrong.

answered Jul 18 '19 at 08:05

Adrian Warkocz

657
4
11

yes, that's right, but the second time it should print the desired values right? – random_user Jul 18 '19 at 08:09
yup but obviously somewhere passing not working, can you put console.log on every component and check in which moment is broken ? – Adrian Warkocz Jul 18 '19 at 08:10
I should console log in `Buttons` right? because that's the middle? How should I do it though? In `Ind` I logged it, undefined and in `Rain` I logged the state and the function reference also..all are working fine. – random_user Jul 18 '19 at 08:12

Why the function argument returns undefined when using props?

3 Answers3