Typescript + React call parent method from child component

Question

I am trying to call parent method from child component, but it doesn't work and method in parent element is not triggered. In this example I have only two components where ChildHello calls method in Hello component.

codesandbox

Hello.tsx

import * as React from "react";

interface Props {
  itemClicked: () => void;
}

export class Hello extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
  }

  itemClicked = val => {
    console.log(val);
  };

  render() {
    const { name } = this.props;
    return <h1 itemClicked={this.itemClicked}>{this.props.children}</h1>;
  }
}

const styles = {
  height: "400px"
};

export class ChildHello extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
  }

  render() {
    return (
      <div onClick={this.props.itemClicked} style={styles}>
        <Hello>Hello Child</Hello>
      </div>
    );
  }
}

scope in parent use this.itemClicked.bind(this)

Lostfields
– Lostfields

2018-12-04 11:29:10 +00:00
Commented Dec 4, 2018 at 11:29 — Lostfields
– Lostfields, Commented Dec 4, 2018 at 11:29
@Lostfields it didn't help

Matt
– Matt

2018-12-04 11:34:06 +00:00
Commented Dec 4, 2018 at 11:34 — Matt
– Matt, Commented Dec 4, 2018 at 11:34

Just code · Accepted Answer · 2018-12-04 12:14:51Z

You need to understand parent child relationship in childHello you are using the click event.

 <div onClick={this.props.itemClicked} style={styles}>
        <Hello>Hello Child</Hello>
      </div>

childhello is called by the index.jsx page

 <div style={styles}>
    <ChildHello name="CodeSandbox" />
  </div>

Here you are not passing any click events. also, hello component is inside the child component which is wrong.

All the parent component should have click method involved and that method should be passed as props.

Like this

Parent:

<div style={styles}>
    <Hello name="CodeSandbox" />
  </div>

Hello component

render() {
    const { name } = this.props;
    return <ChildHello itemClicked={this.itemClicked} />;
  }

ChildHello

  render() {
    return (
      <div onClick={this.props.itemClicked} style={styles}>
        Hello
      </div>
    );
  }

Sandbox demo

Collectives™ on Stack Overflow

Typescript + React call parent method from child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related