ReactJS call parent method over two layers typescript

Question

I got a problem to call a parents method over two layers. It either does nothing or says, that it is not a function. So here is my Child-Component:

class Child extends React.Component {
render() { //return some awesome HTML, that at some point calls doStuff }

doStuff() {
 //do some stuff
 this.props.parentState.notifyParent();
}
}

My parent component now got some conditional stuff going on, so it looks like this:

class Parent extends React.Component {
constructor(props : any) {
        super(props);
        this.state = {
            //setSomeProps
            updateParent: this.updateParent
        };
    }
    determineUsedComponent(props: any) {
        //some conditions
            return <Child parentState={props}/>
    }   
    updateParent() {
        console.log("Update parent");
    }
    render() {
        return (<this.determineUsedComponent props={this.state}/>)
    }
}

I also tried giving the function as single object to the child. Do stuff looks the following then:

doStuff() {
props.notifyParent()
}

while the Parent component then has the determineUsedComponent method with following signature:

determineUsedComponent(props: Any, updateParent: Function) {}

and it gets called:

<this.determineUsedComponent props={this.state} updateParent={this.updateParent}/>

If I then try inside the determineUsedComponent method to insert it like an attribute:

return <Child parentUpdate={this.parentUpdate}/>

It again throws the exception "this.props.notifyParent() not a function". Instead if I write it like this:

return <Child parentUpdate={()=>this.parentUpdate}/>

There is no error, instead just nothing happens. (Also no log.) I am very clueless and now tried every possible option of how to write the function and give it to child, but some gave errors (above two) and most didn´t do anything at all. Any ideas? Maybe good to mention: Child component is written in pure JS, while Parent is written in Typescript.

Not gonna lie, this is a twisted pattern! Unaware of the reasoning though, so I can't really judge, though it's likely [failing to keep the right context somewhere (the `this`).](https://stackoverflow.com/q/33973648/1218980) — Emile Bergeron, Nov 20 '20 at 22:04
Reason is I need the conditional checking, which component should be used dependent on some referenceStats in the Parent-component. Wish I could leave that method in between out, too. Which gives me an idea, decreasing readability, but removing one layer... However it would be good still, if there were some reason for it to work with two layers. :D — Sarah Multitasker, Nov 21 '20 at 08:36

score 1 · Answer 1 · answered Nov 20 '20 at 21:53

1

Did you try

return <Child parentUpdate={()=>this.parentUpdate()}/>

answered Nov 20 '20 at 21:53

DarioRega

992
4
13

score 0 · Answer 2 · answered Nov 21 '20 at 11:01

I didn´t manage to implement it with two layers. However I found another solution: You can move the conditional rendering from the "determineComponent"-method directly into the render()-method and then input the parent-function directly (syntax as DarioRega wrote it above). Then it works.

ReactJS call parent method over two layers typescript

2 Answers2