How Can I pass a function in grandparent component to grandchild components in ReactJs?

Question

I want to know how can I pass a function in grandparent component to grandchild components.
I have a function in Grandparent component which gets id and slice() that. But id comes from a grandchild.
order is like this.

<Manager />
    <RecordList />
       <RecordItem />

when button clicked in, it should give id to the function which comes from
How can I do that without Context API ?
and using pass props down to child

could you please make an example? Thank you all

Answer 1

You can use Context API in React and can pass any data to any child nester under a particular component.

Context API React

EDIT Since you mentioned that you don't want to use Context API. For something like this, where the child is only one component deep, you can probably pass some props through the middle child. I will give you some rough ideas as it's impossible to write the entire since you wrote no code in the example.

<Manager>
    const childBtnClick = (params) => {
         // do you stuff here
    }
    <RecordList childBtnClick={childBtnClick}></RecordList>
</Manager>
<RecordList>
    <RecordItem childBtnClick={props.childBtnClick}></RecordItem>
</RecordList>
<RecordItem>
    <Button onClick={() => props.childBtnClick('passwhat data you want here')}></Button>
</RecordItem>