title: Function passed through props shown non-defined
body: <p>I have got three components <code>Topicscreen</code>, <code>Listview</code>, <code>Listrow</code>. I am passing the function <code>renderrow</code>, and two other properties defined in my 
  <code>Topicscreen</code> to <code>Listview</code>.</p>
  
  <p>Now when i call <code>func</code> in <code>Listview</code>, the props are passed to <code>Listrow</code> as defined in <code>renderrow</code> function, but the <code>onRowclick</code> function which is being passed to <code>Listrow</code> is <code>undefined</code> when i checked it in <code>Listrow</code>. </p>
  
  <p>How to solve this error and pass <code>onRowclick</code> as a function to <code>Listrow</code>?</p>
  
  <p><strong>Topicscreen.js</strong></p>
  
  <pre><code>class Topicscreen extends Component {
    constructor() {
      super();
      this.onRowClick = this.onRowClick.bind(this);
    }
  
    componentDidMount() {
      this.props.dispatch(topicaction.Fetchtopics());
    }
  
    renderLoading() {
      return &lt;p&gt;Loading...&lt;/p&gt;;
    }
  
    renderrow(rowid, topic) {
      //const selected = this.props.checkselection[rowid]
      const selected = "";
      return (
        &lt;Listrow selected={selected} clicking={this.onRowClick} rowid={rowid}&gt;
          &lt;h3&gt;{topic.title}&lt;/h3&gt;
          &lt;p&gt;{topic.description}&lt;/p&gt;
        &lt;/Listrow&gt;
      );
    }
  
    onRowClick(rowid) {
      this.props.dispatch(topicaction.selectedchoice(rowid));
    }
  
    render() {
      if (!this.props.topicsByurl) return this.renderLoading();
      return (
        &lt;div className="TopicsScreen"&gt;
          Hi I am topic screen
          &lt;h1&gt;Choose any three of the below topics&lt;/h1&gt;
          &lt;Listview
            rowid={this.props.topicsurlArray}
            row={this.props.topicsByurl}
            func={this.renderrow}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Listview.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import _ from "lodash";
  
  export default class Listview extends Component {
    constructor() {
      super();
  
      this.show = this.show.bind(this);
    }
  
    show(rowid) {
      return this.props.func(rowid, _.get(this.props.row, rowid));
    }
  
    render() {
      console.log("props in listview", this.props);
      return (
        &lt;div&gt;
          &lt;ul&gt;{_.map(this.props.rowid, this.show)}&lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Listrow.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class Listrow extends Component {
    clicking() {
      this.props.clicking(this.props.rowid);
    }
  
    render() {
      console.log("list row called");
      console.log("listrow props", this.props);
      const background = this.props.selected ? "#c0f0ff" : "#fff";
      return (
        &lt;div style={{ background }} onClick={this.clicking.bind(this)}&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>