Is it possible to do prop drilling from React Class Component to Functional Component?

Question

I am currently working some React Class Component Code and wanna do a props drilling to allow the child functional component call alert functions in the parent Component. Specifically, I am doing the following: In this class constructor, I made the binding: this.setPtbrRequestAlert = this.setPtbrRequestAlert.bind(this);

And in the section where I pass down the props function, I did this:

However, in the child component, props passed are destructured but I am not able to use them in the functional component as these props are not found.

Can somebody explain what is wrong with this props drilling? Why am I not able to reference these values by desturturing them in the functional child component and if there is a way to address it?

I know somebody may wanna suggest refactor all the codes to functional component but I am trying not to mess around with Prod code right now. I want to gracefully implement new features with functional component and refactor old codes in the future gradually. Thanks in advance!

Answer 1

You've written code which is renaming the props inside the child component. When you do this:

({setAlertCallback: AlertCallbackFunction, userId: any}) => {

That's not doing typescript, that's doing destructuring with renaming. It's the equivalent of:

(props) => {
  let AlertCallbackFunction = props.setAlertCallback;
  let any = props.userId

So when you try to interact with setAlertCallback you can't, because you've renamed it AlertCallbackFunction instead.

You want do do:

({ setAlertCallback, userId }: {setAlertCallback: AlertCallbackFunction, userId: any}) => {