CODEWITHSUNDEEP
javascriptreact-nativestatesetstatereact-props
random_user
random_user

Reputation: 71

Why the function argument returns undefined when using props?

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.

Upvotes: 2

Views: 5172

Answers (3)

hong developer
hong developer

Reputation: 13926

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

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20765

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

Upvotes: 1

Adrian Warkocz
Adrian Warkocz

Reputation: 657

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.

Upvotes: 0

Related Questions