Programmatically set introJs data steps not working properly in ReactJs.

[srinivas165]

class Home extends Component {
componentDidMount() {
    let { intro } = this.context;
    intro.setOptions({
      steps: [
        {
          element: document.querySelector("#menu_Dashboard"),
          intro: "Dashboard!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Enquiries"),
          intro: "Enquiries!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Members"),
          intro: "Members!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Attendance"),
          intro: "Checkins!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Rooms"),
          intro: "Rooms!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Packages"),
          intro: "Packages!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Invoices"),
          intro: "Invoices!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Employees"),
          intro: "Employees!",
          position: "down"
        },
        {
          element: document.querySelector("#menu_Settings"),
          intro: "Location Settings!",
          position: "down"
        }
      ]
    });

    intro.start();
}
     render () {
              return (
                <div className= "menu">
                  <div id ="menu_Dashboard">Dashboard</div>
                  <div id ="menu_Enquiries">Dashboard</div>
                  <div id ="menu_Members">Dashboard</div>
                  <div id ="menu_Attendance">Dashboard</div>
                  <div id ="menu_Packages">Dashboard</div>
                  <div id ="menu_Rooms">Dashboard</div>
                  <div id ="menu_Invoices">Dashboard</div>
                 <div id ="menu_Employees">Dashboard</div>
                 <div id ="menu_Settings">Dashboard</div>
              </div>
           )
      }
}

This my Home component, when I render this component intro tool tip is starting from step 4 which is members. Why is it happening like this. Can anyone help me out this issue. I want intro tool tip starts from first step which is dashboard.

[bozdoz]

I think the spaces in between id ="menu_Dashboard", and the others seem strange; but I really don't see why it would start at step 4. Maybe try fixing those spaces and see if that affects it at all.

[srinivas165]

Are you talking about css selector spaces.

[bozdoz]

I just tested the attribute idea and it didn't seem to affect it. I guess I'm not sure why this is happening. I might need to see more of the code.

[srinivas165]

I fixed it, Actually I'm rendering the component after 3 seconds. So the problem is time, I resolved the issue using setTimeOut function in componentDidMount(). Thanks for your communication.

[bozdoz]

Thanks for letting us know. Wondering, though, depending on your setup, shouldn't you use componentDidUpdate, in case one of the elements are added after mounting?

[srinivas165]

Sorry my bad wrongly typed in the code. Actually it is componentDidMount(). Thanks for letting me know .