title: binding a function passed to a component
body: <p>Reading <a href="https://stackoverflow.com/questions/29532926/this-value-is-null-in-function-react-native">this SO answer</a>, I understand that when I pass a function to a react component, I have to bind a function in the constructor like this</p>
  
  <pre><code> constructor(props) {
      super(props);
  
      //binding function
      this.renderRow = this.renderRow.bind(this);
      this.callThisFunction = this.callThisFunction.bind(this);
      }
  </code></pre>
  
  <p>or I'll get an error like this. </p>
  
  <blockquote>
    <p>null is not an object: evaluating <code>this4.functionName</code> </p>
  </blockquote>
  
  <p>Following that advice, I bound the function in the constructor but I'm still getting the same error.</p>
  
  <p>I'm making a Master/Detail app with React Native based on the Movies example in the react native repo, except that I don't use this syntax</p>
  
  <pre><code>var SearchScreen = React.createClass({
  </code></pre>
  
  <p>(which is what the repo is) but rather this ES6 style syntax</p>
  
  <pre><code>class ListOfLists extends Component {
  </code></pre>
  
  <p>In my list view, I render a row like this. </p>
  
  <pre><code>  class MovieList extends Component{
        constructor(props){
          super(props);
          this.selectMovie = this.selectMovie.bind(this);
          this.state = {
            dataSource: new ListView.DataSource({
              rowHasChanged: (row1, row2) =&gt; row1 !== row2,
            }),
          };
        }
            renderRow(
              movie: Object,
              sectionID: number | string,
              rowID: number | string,
              highlightRowFunc: (sectionID: ?number | string, rowID: ?number | string) =&gt; void,
            ) {
            console.log(movie, "in render row", sectionID, rowID);
              return (
                &lt;ListCell 
                  onSelect={() =&gt; this.selectMovie(movie)}
                  onHighlight={() =&gt; highlightRowFunc(sectionID, rowID)}
                  onUnhighlight={() =&gt; highlightRowFunc(null, null)}
                  movie={movie}
                /&gt;
              );
            }
  
         selectMovie(movie: Object) {
          if (Platform.OS === 'ios') {
            this.props.navigator.push({
              title: movie.name,
              component: TodoListScreen,
              passProps: {movie},
            });
          } else {
            dismissKeyboard();
            this.props.navigator.push({
              title: movie.title,
              name: 'movie',
              movie: movie,
            });
          }
        }
       render(){
          var content = this.state.dataSource.getRowCount() === 0 ?
              &lt;NoMovies  /&gt; :
              &lt;ListView
               ref="listview"
               renderSeparator={this.renderSeparator}
               dataSource={this.state.dataSource}
               renderFooter={this.renderFooter}
               renderRow={this.renderRow} 
               automaticallyAdjustContentInsets={false}
               keyboardDismissMode="on-drag"
               keyboardShouldPersistTaps={true}
               showsVerticalScrollIndicator={false}
               renderRow={this.renderRow}
       }
  </code></pre>
  
  <p>The key line is <code>this.selectMovie(movie)</code>. When I click a row with a movie name, I get an error </p>
  
  <blockquote>
    <p>null is not an object: <code>evaluating this4.selectMovie</code></p>
  </blockquote>
  
  <p>Question: why is it telling me <code>null is not an object</code> or rather why is that function null?</p>
  
  <p>Update:</p>
  
  <p>I added the render method to the code to show where <code>renderRow</code> is getting used</p>