title: use react-joyride in multiple child component
body: <p>I want to use <code>react-joyride</code> in my application but there is a problem. I have breakdown my component into <code>Navbar</code> and <code>SideNavigation</code>. They are separate child component. Now that I want to use <code>react-joyride</code> in both first in <code>SideNavigation</code> and then the last step be in <code>Navbar</code>. How can I do it so? </p>
  
  <p>Here is my code </p>
  
  <pre><code>class AgentDashboard extends React.Component {
    constructor() {
      super();
      this.state = {
        username: "",
        roles: [],
        joyrideOverlay: true,
        joyrideType: "continuous",
        isReady: false,
        isRunning: false,
        stepIndex: 0,
        steps: [],
        selector: ""
      };
    }
    componentDidMount() {
    this.setState({
        isReady: true,
        isRunning: true,
      });
    }
  
  
    addSteps(steps) {
      let newSteps = steps;
      if (!Array.isArray(newSteps)) {
        newSteps = [newSteps];
      }
  
      if (!newSteps.length) {
        return;
      }
  
      this.setState(currentState =&gt; {
        currentState.steps = currentState.steps.concat(newSteps);
        return currentState;
      });
    }
  
    callback(data) {
      this.setState({
        selector: data.type === "tooltip:before" ? data.step.selector : ""
      });
    }
  
    next() {
      this.joyride.next();
    }
  
    render() {
      const {
        isReady,
        isRunning,
        joyrideOverlay,
        joyrideType,
        selector,
        stepIndex,
        steps
      } = this.state;
      let html;
      if (isReady) {
        html = (
          &lt;div&gt;
            &lt;Joyride
              ref={c =&gt; (this.joyride = c)}
              callback={data =&gt; this.callback(data)}
              debug={false}
              disableOverlay={selector === ".card-tickets"}
              locale={{
                back: &lt;span&gt;Back&lt;/span&gt;,
                close: &lt;span&gt;Close&lt;/span&gt;,
                last: &lt;span&gt;Last&lt;/span&gt;,
                next: &lt;span&gt;Next&lt;/span&gt;,
                skip: &lt;span&gt;Skip&lt;/span&gt;
              }}
              run={isRunning}
              showOverlay={joyrideOverlay}
              showSkipButton={true}
              showStepsProgress={true}
              stepIndex={stepIndex}
              steps={steps}
              type={joyrideType}
            /&gt;
            &lt;TopNavigation
              username={this.state.username ? this.state.username : ""}
              }
              roles={this.state.roles}
            /&gt;
            &lt;main className="imp"&gt;
              &lt;SideNavigation
                currentNav={this.props.location.pathname.substring(1)}
                addSteps={steps =&gt; this.addSteps(steps)}
                selector={selector}
                next={() =&gt; this.next()}
              /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        );
      }
      return (
        &lt;div&gt;
          {html}
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(AgentDashboard);
  </code></pre>
  
  <p><strong>SideNavigation.js</strong></p>
  
  <pre><code>const sideMenus = [
    {
      menu: "My Property",
      link: "imp/dashboard/my-properties",
      icon: "icon-hotel",
      class: "hotel-selector"
    },
    {
      menu: "My IMP",
      link: "imp/dashboard/my-imps",
      icon: "icon-people-outline",
      class: "imp-selector"
    },
  ];
  
  class SideNavigation extends React.PureComponent {
    componentDidMount() {
      const steps = [
        {
          title: "Trigger Action",
          text: "It can be click",
          selector: ".imp-dashboard",
          position: "right",
          type: "hover",
        },
        {
          title: "Advance customization",
          text:
            "You can set individual styling options for beacons and tooltips.",
          selector: ".hotel-selector",
          position: "bottom",
          allowClicksThruHole: true,
          style: {
            backgroundColor: "#ccc",
            mainColor: "#000",
            header: {
              color: "#f04",
              fontSize: "3rem",
              textAlign: "center"
            },
            footer: {
              display: "none"
            },
            beacon: {
              inner: "#000",
              outer: "#000"
            }
          }
        }
      ];
      this.props.addSteps(steps);
    }
  
    handleClick = e =&gt; {
      e.preventDefault();
      const { next } = this.props;
      next();
    };
  
    render() {
      const { currentNav, selector } = this.props;
      const menuToShow = sideMenus.map(menuItem =&gt;
        &lt;Menu.Item key={menuItem.link} className={menuItem.class}&gt;
          &lt;NavLink
            activeClassName={currentNav.includes(menuItem.link) ? "active" : ""}
            to={`/${menuItem.link}`}
          &gt;
            &lt;i className={menuItem.icon} /&gt;
            &lt;span&gt;
              {menuItem.menu}
            &lt;/span&gt;
          &lt;/NavLink&gt;
        &lt;/Menu.Item&gt;
      );
      return (
        &lt;Sidebar.Pushable&gt;
          &lt;Sidebar
            as={Menu}
            width="thin"
            visible
            icon="labeled"
            vertical
            inverted
          &gt;
            &lt;Menu.Item name="dashboard" className="imp-dashboard"&gt;
              &lt;NavLink
                activeClassName={currentNav === "imp/dashboard" ? "active" : ""}
                to="/imp/dashboard"
              &gt;
                &lt;i className="icon-activity" /&gt;
                &lt;span&gt;Dashboard&lt;/span&gt;
              &lt;/NavLink&gt;
            &lt;/Menu.Item&gt;
            {menuToShow}
          &lt;/Sidebar&gt;
          &lt;Sidebar.Pusher&gt;
            &lt;Routes /&gt;
          &lt;/Sidebar.Pusher&gt;
        &lt;/Sidebar.Pushable&gt;
      );
    }
  }
  </code></pre>
  
  <p>Do you think it is possible to use react-joyride with these kind of component breakdown/structure? I am totally blank on how can I use it. Can anyone guide me, please? I managed to write the above code where I don't get any error nor I see any intro part working when button is clicked. Have i missed anything?</p>
  
  <p>Here is the code in gist for better readability </p>
  
  <p><a href="https://gist.github.com/anonymous/bc0121ab23652513c2639a0aa55c4390" rel="nofollow noreferrer">https://gist.github.com/anonymous/bc0121ab23652513c2639a0aa55c4390</a></p>