Is setting css visibility, using state, to display elements at different times a good practice in re-CodePudding

I need to view items at different times; depending on the progress of a stepper, display element 1/2/3.

I intend to use the state to set the visibility of the elements, everything works, but I can't understand if it's a good move.

CodePudding user response：

Yes this is fine in my experience. If you have multiple tabs on one page, or in your case a stepper that is on one page, where each step shows different content. It is normal to have something like this in your component:

// the below code is inside a react functional component.

const [currentStep, setCurrentStep] = useState(0);

return (
    <>
        {currentStep === 0 && <Tab1 />}
        {currentStep === 1 && <Tab2 />}
        {currentStep === 2 && <Tab3 />}
    </>
)

If it is possible for you to do it the way I show in the snippet, then do it this way.

It might be unnecessary to pass the state on to the css to then make the component invisible.

You can still pass the variable to the css of the component if you want to animate the component coming into the page or leaving the page when changing step.

Good Luck!