How to call from parent component child function in react, typescript and redux

Question

I have child component:

import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";

class Child extends Component<any, any> {

    childFunction = () => {
        console.log('childFunction');
    };

    render() {
        return <div>Child</div>
    }
}

export default connect<any, any>(
    null,
    null
)(Child);


and parent component:

import * as React from "react";
import {Component, MouseEvent} from "react";
import {connect} from "react-redux";
import Child from "./Child";

class Parent extends Component<any, any> {

    parentFunction = (e: MouseEvent<HTMLElement>) => {
        console.log("parent");
        //TODO : call child function?
    };

    render() {

        let child = <Child />;

        return <div>
            {child}
            <button onClick={(e) => this.parentFunction(e)}>Call child function from parent</button>

        </div>
    }
}

export default connect<any, any>(
    null,
    null,
    null,
    {forwardRef: true}
)(Parent);

The question is: how to call Child.childFunction() when click on button, which is in Parent component?

I have tried to create reference on Child: React.createRef<Ref<Child>>();, but get error: Error:(13, 39) TS2749: 'Child' refers to a value, but is being used as a type here.

The reason is: connect function in Child component.

The easiest thing to do would be to pass a function reference to the parent component. I'd caution against this, though; it'll get confusing quickly. — Dave Newton
– Dave Newton, Commented Jul 13, 2019 at 11:44
Why do you want to do this? It's somewhat counter to how things work. What survive problem are you trying to solve? Unrelated, but why do you use an arrow function in the onCkick property? Seems redundant. — Dave Newton
– Dave Newton, Commented Jul 13, 2019 at 11:49

Sultan H. · Accepted Answer · 2019-07-13 11:41:47Z

1

Assuming that the function in your parent component called parentFunction

And in your render method of the parent component, give the property parentFunction to the child component, which will be refering to the parent component's function like this.parentFunction.

render(){
  return (
    <ChildComponent parentFunction={this.parentFunction} />
  )
}

Inside your child component, on the function that handles the button click, you will be able to access and invoke the function parentFunction which is sent from the parent as follows:

supposing that childFunction is the function you handle the button click with:

childFunction = (e) => { //don't forget to include the event to your onclick event handler
  console.log('childFunction');
  this.props.parentFunction(e); //the function invoked after being passed from parent component as a prop.
};

To read more about this, Passing Data Between React Component.

answered Jul 13, 2019 at 11:41

Sultan H.

2,9383 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user657009 Over a year ago

Child component does not have any buttons.

Collectives™ on Stack Overflow

How to call from parent component child function in react, typescript and redux

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related