Ref to child component

Asked by At

I am unable to access a child's function using ref. If I try to examine this.child.current the props of the child is listed.

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.child = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.child.current.getAlert();
  }

  render() {
    <div>
      <BottomPanelPeriodList ref={this.child}>
        <div label={<FormattedMessage id="bottomPanel.threeMonth" />} />
        <div label={<FormattedMessage id="bottomPanel.sixMonth" />} />
      </BottomPanelPeriodList>
    </div>
  }
}
export default connect(mapStateToProps)(BottomPanel);

class BottomPanelPeriodList extends React.Component<Props, State> {
  getAlert = () => {
    alert('HELLOWORLD!');
  };

  render() {
    ...
  }
}
export default connect(null, mapDispatchToProps, null, { forwardRef: true })(BottomPanelPeriodList);

1 Answers

0
Kishan Jaiswal On
render() {
 retuun(  <div>
  <BottomPanelPeriodList ref={this.child}>
    <div label={<FormattedMessage id="bottomPanel.threeMonth" />} />
    <div label={<FormattedMessage id="bottomPanel.sixMonth" />} />
  </BottomPanelPeriodList>
</div>)
}

do changes and refer this link https://repl.it/@KishanJaiswal/HungryAustereRelationalmodel