2

I am using react wrapper for intro.js. I am trying to integrate it in functional component. The steps are working fine, but the intro.js is not correctly identifying the elements provided in the steps. I have tried defining the elements with document.getElementById() and also with document.querySelector().Nothing seems to work. Is there any other way?

import React,{useState} from 'react'

import { Steps, Hints } from "intro.js-react";

import "intro.js/introjs.css"

import "intro.js/themes/introjs-nassim.css";

const AppIntro = () =>{

const [stepsEnabled, setStepsEnabled] = useState(false)
const [initialStep, setInitialStep] = useState(0)
const [steps, setSteps] = useState([
    {
        intro:"Welcome to our application",
        position: 'top'
    },
    {
        element:document.getElementById('.card'),
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: document.querySelector('.tableRow'),
        intro:'This is the third step',
        position: 'top'
    }
])
 const onExit = () =>{
    setStepsEnabled(false);
  }
const startIntro=()=>{
    setStepsEnabled(true)
}
return(
    <div>
    <button onClick={()=>startIntro()}>Click me</button>
    <Steps
         enabled={stepsEnabled}
         steps={steps}
         initialStep={initialStep}
         onExit={onExit}
         options=
         {{
             tooltipClass: 'customTooltip',
             showProgress: true,
             showStepNumbers: true,
             showBullets: false,
             exitOnOverlayClick: false,
             doneLabel: "Done",
             nextLabel: "Next",
             hideNext: false,
         }}
     />
     </div>
)

} export default AppIntro

This is my component

Keerthana Ramachandran
  • 31
  • 3

1 Answers1

0

You need to replace

    {
        element:document.getElementById('.card'),
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: document.querySelector('.tableRow'),
        intro:'This is the third step',
        position: 'top'
    }

With

    {
        element: '.card',
        intro: 'This is the second step',
        position: 'left'
    },
    {
        element: '.tableRow',
        intro:'This is the third step',
        position: 'top'
    }

This will have the step attach to elements with the class .card and .tableRow. if you want to use an ID instead to identify the element to attach to, you can replace '.card' with '#card' in order to attach to the element with the id of card.

Kian
  • 9
  • 1