0

I want to pass a function from parent to child's child component, but showing up as 'undefined'

I understand how to pass function from parent to child:

class Child extends Component {
  render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}

(Reference: past question)

But how do I properly pass down to the GrandChild in this:

class GranChild extends Component {
    render() {
        <div onClick={this.props.passedFunction}></div>
    }
}

class Child extends Component {
    render() {
        <GranChild passedFunction={this.passedFunction}/>
    }
}

class Parent extends Component {
    passedFunction = () => {}
    render() {
      <Child passedFunction={this.passedFunction}/>
    }
}
js-learner
  • 457
  • 2
  • 9
  • 26

1 Answers1

1

refactor your child function to this:

class Child extends Component {
render() {
    <GranChild passedFunction={this.props.passedFunction}/>
}

}

Besufkad Menji
  • 1,433
  • 9
  • 13
  • I tried this and using chrome react dev tools the props on the GranChild component are passedFunction: undefined – js-learner Sep 22 '20 at 15:00