React Native Pass Parent Method to Child Component

Question

I am trying to pass method from my parent component to child component. My code is correct i think but still it shows the error undefined is not an object(evaluating '_this2.props.updateData') . I don't know whats the issue because i searched the internet a lot and everyone is passing props to child like this. Kindly tell what am i missing

Parent:

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={val => this.updateData(val)} />
    );
  }

Child:

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick()}>Test</button>
    );
  }
}

Answer 1

`class Child extends React.Component {    
    handleClick = () => {
        const passedData = 'child data'
        this.props.updateData(passedData);
    }
    render() {
        return (
            <button onClick={this.handleClick}>Test</button>
        );
    }
}`

Answer 2

class Parent extends React.Component { 
updateData = (data) => {
  console.log(`This data isn't parent data. It's ${data}.`)
}
render() {
  return (
    <Child updateData={this.updateData} />
  );
}
}

and child component: `

class Child extends React.Component {
  const passedData = 'child data'
  handleClick = () => {
    this.props.updateData(passedData);
  }
  render() {
    return (
      <button onClick={this.handleClick}>Test</button>
    );
  }
}

`

Answer 3

You need to pass the function directly, not as a callback

class Parent extends React.Component {
  updateData = (data) => {
    console.log(`This data isn't parent data. It's ${data}.`)
    // data should be 'child data' when the
    // Test button in the child component is clicked
  }
  render() {
    return (
      <Child updateData={this.updateData} />
    );
  }

Answer 4

I think you need to pass a function like this. Check out this solution .