How to work with multiple components in intro js for react

Question

I'm using introjs-react package for my project but I'm facing a problem of interacting with multiple components..... As it is not able to select element which is not being rendered at first but at second step I'm rendering component on the screen (by history.push) but still it is not selecting it and showing element is null.

<Steps
          enabled={enableSteps}
          steps={steps}
          initialStep={initialStep}
          options={{
            showStepNumbers: false,
            showBullets: false,
            exitOnOverlayClick: false,
            doneLabel: "Finish",
            nextLabel: "Next",
            hideNext: true,
            showProgress: true
          }}
          onChange={(index) => changeSteps(index)}
          onStart={index => startSteps(index)}
          onExit={(index) => exitSteps(index)}
      />

this is the steps component

const changeSteps = (index) => {
    if (index === 2) {
      history.push('/notifications');
    }
  }

here I am just trying to go to another page notifications which is not being rendered at first.....due to which selector is not working and is not selecting elements in notification page

I've edited the question, It would be nice if this prob is solved as I'm stuck on it from two days.....Cheers! — Muhammad Ibrahim, May 23 '20 at 08:42

score 0 · Answer 1 · answered May 26 '20 at 14:23

I spent a lot of my time on this but it appears that there is no proper solution for this.....Although u can solve it by creating a reference to Steps component and then u can change elements through

refName.current.introJS.steps[stepIndex].element= document.querySelector(element)

it must be done after you render the other component on which you want to display instructions.....!

How to work with multiple components in intro js for react

1 Answers1