I have 3 components:

-Component A
    -Component B
        -Component C extends Component B

I'm passing a function as props from Component A to Component B and want to call the function in Component C.

I've tried added:

constructor(props) {
   super(props);
   this.props.validationsFunc = this.props.validationsFunc.bind(this);
}

and variations with/without props on either side of the bind in Component B. But when I try calling this.props.validationsFunc() in Component C, I get the error saying it is not a function.

class ComponentA extends PureComponent {
    const validationsFunc = () => {
        console.log('hi');
    };
    <ComponentB validationsFunc={validationsFunc} />
}


class ComponentB extends PureComponent {
   static propTypes = {
      validationsFunc: PropTypes.func
   };

   constructor(props){
      super(props);
      this.props.validationsFunc = this.props.validationsFunc.bind(this)
   }
}

   
class ComponentC extends ComponentB {
    this.props.validationsFunc();
}

How do I access this function in Component C without directly passing props to it?