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.

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