Unable to trigger child component methods in parent component

Question

im trying to trigger a child component's method here. I have the following components :

Child component

class WorkflowIllustration extends Component {

  _unselectEdge(previous_transition) {
      /// some code///
  }

    render() {
        return (
          <Fragment>
            ///some code//
        </Fragment>
        )
    }
}
//some redux code here//


export default withResizeDetector(connect(null, mapDispatchToProps)(WorkflowIllustration));

parent component

class WorkflowObjectComponent extends Component {
  constructor(props) {
    super(props);
    this.WorkflowIllustration = React.createRef();
  }

  state = { visible: false };

  componentDidMount() {
    this.props.initial(this.props.workflow_class.id,this.props.match.params.id)
  }
  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  
  onClose = () => {
    this.setState({
      visible: false,
    })
    console.log(this.refs)
    this.WorkflowIllustration.current._unselectEdge(this.props.workflowobject.selected_transition)
    console.log(this.WorkflowIllustration)
  };


  render() {
    return (
        <Fragment>
            <Col className="gutter-row" span={12}>
              <WorkflowIllustration
                can_edit={false}
                workflow={this.props.workflowobject}
                showDrawer={this.showDrawer}
                ref={this.WorkflowIllustration}
              />
            </Col>
          <Drawer
            title="Change Password"
            placement="right"
            closable={true}
            onClose={this.onClose}
            visible={this.state.visible}
            width={600}
          >
              <WorkflowEditor
                can_edit={false}
                workflow={this.props.workflowobject}
              />
          </Drawer>
        </Fragment>
        :
        <div style={{ textAlign: 'center' }}><Spin size='large' /></div>
    )
  }
} 


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(WorkflowObjectComponent));

However in my console im getting this:

{current: null}

followed by an error that they cant read the value of undefined. As much as possible , i would like to adopt this pattern of code as i don't wish to touch the child component.

Is there a reason and a solution to this?

Does this answer your question? [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — jmargolisvt, Jun 30 '20 at 17:56

score 0 · Answer 1 · answered Jun 30 '20 at 17:31

0

You cannot create refs on Components. So you can't from parent component execute child component method. But you can execute parent method inside child component, so you need rewrite you logic.

answered Jun 30 '20 at 17:31

Loppik

328
2
8

Hey , thanks for responding , there's this post that was talking about how to call the child method in the parent https://stackoverflow.com/questions/37949981/call-child-method-from-parent , am i misunderstanding the post? – neowenshun Jun 30 '20 at 17:34

Unable to trigger child component methods in parent component

1 Answers1