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.

ravibagul91 · Accepted Answer · 2019-07-18 08:33:11Z

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, 2019 at 8:33

answered Jul 18, 2019 at 8:23

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

random_user Over a year ago

When I use <Buttons selectReport={this.onSelect} it gives this.props.navigation.state.params.selectreport is not a function but If I use <Buttons selectReport={() => this.onSelect} it works. Why?

ravibagul91 Over a year ago

<Buttons selectReport={() => this.onSelect} bind this automatically.

random_user Over a year ago

Why it so confusing .... I am having difficulties with binding. can you direct to some resources?

random_user Over a year ago

and also what about the parameters ? that was mentioned in another answer?

ravibagul91 Over a year ago

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.

|

hong developer · Accepted Answer · 2019-07-18 08:46:13Z

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, 2019 at 8:46

answered Jul 18, 2019 at 8:12

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

3 Comments

random_user Over a year ago

When I do this ... and click the Touchable opacity button it says this.props.navigation.state.params.selectreport is not a function ?

hong developer Over a year ago

@random_user There is no result value in your function. Please enter the result as my answer.

random_user Over a year ago

I did what your answer stated.. still the above error

Adrian Warkocz · Accepted Answer · 2019-07-18 08:05:57Z

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, 2019 at 8:05

Adrian Warkocz

6574 silver badges11 bronze badges

3 Comments

random_user Over a year ago

yes, that's right, but the second time it should print the desired values right?

Adrian Warkocz Over a year ago

yup but obviously somewhere passing not working, can you put console.log on every component and check in which moment is broken ?

random_user Over a year ago

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.

Collectives™ on Stack Overflow

Why the function argument returns undefined when using props?

3 Answers 3

8 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related