How can a React Component trigger the function of a sibling React Component

Question

Let's say I have the following react code.

<Navigation parentWindow={this} />
<p>Sub Pages</p>
<ReactCSSTransitionGroup
    component="div"
    transitionName="page-transition"
    transitionEnterTimeout={0}
    transitionLeaveTimeout={500}
  >
      {React.cloneElement(this.props.children, {
          key: location.pathname
      })}
  </ReactCSSTransitionGroup>

The ReactCSSTransitionGroup will eventually render a <ContactPage /> which is created by a ContactPage.js. Here's what ContactPage.js looks like:

import React from 'react';

export default class Page extends React.Component
{
    testMe() {alert('Hello World!');}
    render() {return <div>Hello</div>;}
}

From my <Navigation /> which is created by Navigation.js, I want to be able to trigger the ContactPage.testMe(). So I did this in my Navigation.js

import React from 'react';

export default class Page extends React.Component
{
    render() {
        this.props.parentWindow.props.children.testMe();
        return <div>Navigate me</div>;
    }
}

But when I run the project, my Navigation gives me the error:

Uncaught TypeError: this.props.parentWindow.props.children.testCall

How do I get around this problem?

You have export default class Page extends React.Component in your Navigation.js. Is that just a copy and paste mistake? — user5325596
– user5325596, Commented Nov 4, 2016 at 18:35

guzart · Accepted Answer · 2016-11-04 21:58:11Z

Theoretically you could achieve this by using refs. In the ParentWindow component you would assign a ref to the cloned children, that you would then pass as a prop to the navigation.

React works a bit different than other JS libraries and it forces you to move your business logic, or event logic to the parent component and pass it down as props. What I would suggest is that you pass in a callback function to the Navigation page, that when triggered it calls the ContactPage method.

class Navigation extends React.Component {
  render() {
    this.props.onAlertParent();
    return <div>Navigate me</div>;
  }
}

class ParentWindow extends Component {
  alertChild() {
    if (this.childNode && this.childNode.testMe) {
      this.childNode.testMe();
    }
  }

  render() {
    <div>
      <Navigation onAlertParent={() => this.alertChild()} />
      <p>Sub Pages</p>
      <ReactCSSTransitionGroup
        component="div"
        transitionName="page-transition"
        transitionEnterTimeout={0}
        transitionLeaveTimeout={500}
      >
        {React.cloneElement(this.props.children, {
          key: location.pathname,
          ref: (node) => { this.childNode = node; }
        })}
      </ReactCSSTransitionGroup>
    </div>
  }
}

Notice how the Navigation component receives a callback function via the props, the navigation element doesn't need to know anything about its siblings, it's communicating to them using the parent.

The react way is to communicate between components using props by passing either data or callbacks. There is always a better way to communicate than calling element methods. Even the approach I suggested is flawed since it's still calling a method from an element.

Collectives™ on Stack Overflow

How can a React Component trigger the function of a sibling React 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