CODEWITHSUNDEEP
reactjsreact-component
js-learner
js-learner

Reputation: 507

React Pass function to child's child component

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}/>
    }
}

Upvotes: 0

Views: 94

Answers (1)

Besufkad Menji
Besufkad Menji

Reputation: 1588

refactor your child function to this:

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

}

Upvotes: 1

Related Questions