Call parent function from child component in React-Native ListView row

Question

I have seen a few examples of this question but was unable to get any to work, or completely understand how it all fits together. I have a component called ParentListView and another called ChildCell (a row within the listView) I want the onPress from the ChildCell to call a function in ParentListView.

class ChildCell extends Component {

  pressHandler() {
    this.props.onDonePress;
  }

  render() {
    return (
        <TouchableHighlight onPress={() => this.pressHandler()} >
          <Text>Child Cell Button</Text>
        </TouchableHighlight>
    );
  }

}

and in ParentListView:

class ParentListView extends Component {  

//...

  render() {

    return (
      <ListView
        dataSource={this.state.dataSource}
        style={styles.listView}
        renderRow={this.renderCell}
        renderSectionHeader={this.renderSectionHeader}
        />
    );
  }

  renderCell() {
    return (
      <ChildCell onDonePress={() => this.onDonePressList()} />
    )
  }

  onDonePressList() {
    console.log('Done pressed in list view')
  }

}

I think that is all the pertinent code. I can get the press to register wishing the ChildCell, but cannot get the method to fire in ParentListView. What am I missing?

Thanks in advance!

UPDATE 1:

in ParentListView if I change the props passed in to this:

<ChildCell onDonePress={this.onDonePressList.bind(this)} />

I get the Unhandled JS Exception: null is not an object (evaluating 'this.onDonePressList') error at compile time when rendering the cell.

If I put the console.log directly in like this:

<ChildCell onDonePress={() => console.log('Done pressed in list view')} />

it logs the message fine.

If I leave it like I had originally:

<ChildCell onDonePress={() => this.onDonePressList()} />

It crashes on buttonPress with the Unhandled JS Exception: null is not an object (evaluating '_this2.onDonePressList')

UPDATE 2:

OK, I have tried binding the method in the constructor like so:

class ParentListView extends Component {
  constructor(props) {
    super(props);
    this.onDonePressList = this.onDonePressList.bind(this);
    this.state = {...};
}

but it gives me this error: null is not an object (evaluating 'this.onDonePressList') and will not run.

UPDATE 3: Here is a link to a react native playground

Answer 1

Try calling onDonePress in pressHandler like this:

pressHandler() {
  this.props.onDonePress()
}

Also, bind this to your renderRow and renderSectionHeader:

<ListView
    dataSource={this.state.dataSource}
    style={styles.listView}
    renderRow={this.renderCell.bind(this)}
    renderSectionHeader={this.renderSectionHeader.bind(this)}
    />

I've set up an example here using the above function.

https://rnplay.org/apps/DcdAuw