React Native：从子级调用父级组件的函数时遇到问题

Question

I'm having an issue where I'm trying to call a function that's located in a parent component from inside the child component, but it's just not working.

Right now I'm currently getting this error: E ReactNativeJS: { [TypeError: undefined is not a function (evaluating '_this.props.setModalVisible(false)')]

I've looked at similar questions on SO, but can't figure it out. Any help would be much appreciated!

My Parent component's code:

constructor (props) {
  super(props)
  this.setModalVisible = this.setModalVisible.bind(this)
  this.state = {
    modalVisible: false,
  }
}

setModalVisible = (visible) => {
  this.setState({modalVisible: visible});
}

...

return <Child setModalVisible={ this.setModalVisible } />;

My Child component's code:

handlePress = ( setModalVisible ) => {
  this.lookUp(setModalVisible);
}

lookUp = (setModalVisible) => {
  fetch('https://example.com/path/that/works' )
    .then( (response) => {
      if(response.ok) {

        // TRYING TO MAKE THIS WORK
        this.props.setModalVisible(false)
      }
    })
   ...
}

render () {
  const { setModalVisible } = this.props
  return (
    <Button onPress={ () => this.handlePress( this.props.setModalVisible ) }>View Thing</Button>
  )
}

Answer 1

<Button onPress={ () => this.handlePress( this.props.setModalVisible ) }>View Thing</Button>

is not a correct way to pass a function as an argument to another function, you don't even need it. You can do it like

handlePress = (  ) => {
  this.lookUp();
}

lookUp = () => {
  fetch('https://example.com/path/that/works' )
    .then( (response) => {
      if(response.ok) {

        this.props.setModalVisible(false)
      }
    })
   ...
}

render () {
  const { setModalVisible } = this.props
  return (
    <Button onPress={ () => this.handlePress() }>View Thing</Button>
  )
}

Also when you are calling a parent function with some argument, you need to pass it from parent like

  return <Child setModalVisible={(val) => this.setModalVisible(val) } />;

Answer 2

Just FYI it was a scoping issue, and I have since fixed it. I was still getting an error and it was fixed when I changed the functions on lines 36 and 40 of parent.js to arrow functions.