title: Why the function argument returns undefined when using props?
body: <p>I am building an app using <code>react-native</code>. I have 3 components namely <code>Ind.js</code>, <code>Buttons.js</code>, <code>Rain.js</code>. I am required to select an option in <code>Rain</code> and save it in the state of <code>Ind</code> for further processing. Since  <code>Rain</code> component is not directly related to <code>Ind</code> but is connected via a <code>navigation route</code> in <code>Buttons</code>.
  I am using <code>react-navigation</code>. </p>
  
  <p>To do so I created a function <code>onSelect()</code> in <code>Ind</code> which does the <code>setState</code> and passed it to <code>Buttons</code> via props and passed again to <code>Rain</code> then I executed the function, the problem is the function is getting called but no parameters are passed ie, it <code>console.logs</code> <code>null</code> then <code>undefined</code>.</p>
  
  <p>I have tried to <code>console.log</code> the parameters that are passed to <code>Ind</code>.</p>
  
  <p><code>Ind.js</code></p>
  
  <pre><code>export default class Ind extends Component {
  constructor(){
  super();
  this.state = { report: null}
  }
  onSelect = (newreport) =&gt; {
        this.setState({
          report: newreport
        })
        console.log("Parameter: ", newreport)
        console.log("State: ", this.state.report)
      }
  
  render(){
  return(
  &lt;Buttons selectReport={() =&gt; this.onSelect()}
  )
  
  }
  
  }
  </code></pre>
  
  <p><code>Buttons.js</code></p>
  
  <pre><code>export default class Buttons extends Component{
  constructor(props){
  super(props);
  }
  render(){
  return(
  &lt;TouchableOpacity
      onPress={() =&gt; {this.props.navigation.navigate('Rain',{
                    selectReport: this.props.selectReport });
                  }}&gt;
            &lt;Text style={styles.text}&gt;Rain&lt;/Text&gt;
   &lt;/TouchableOpacity&gt;
  )
  }
  }
  </code></pre>
  
  <p><code>Rain.js</code></p>
  
  <pre><code>export default class Rain extends Component{
  constructor(props){
  super(props);
  this.state = {
  selection: "Test"
  }
  this.selectOption = this.selectOption.bind(this);
  }
  selectOption = () =&gt; {
  this.props.navigation.state.params.selectReport(this.state.selection)
  }
  }
  </code></pre>
  
  <p>The <code>console log</code> return first <code>Parameter: undefined State: null</code> which is understandable because nothing is clicked but after clicking it shows
  <code>Parameter: undefined State: undefined</code>.
  What is happening? I am a beginner and is there something wrong in binding or sending the props?
  Please Explain.</p>