This does not render the steps
const FirstStep = () => {
const { isActive } = useWizardStep()
return isActive && <div>First Step</div>
}
const SecondStep = () => {
const { isActive } = useWizardStep()
return isActive && <div>Second Step</div>
}
const App = () => {
return (
<Wizard>
<FirstStep />
<SecondStep />
</Wizard>
)
}
This does work
const FirstStep = () => {
return (
<WizadStep>
{({ isActive }) => isActive && <div>First Step</div>
</WizardStep>
)
}
const SecondStep = () => {
return (
<WizardStep>
{({ isActive }) => isActive && <div>Second Step</div>
</WizardStep>
)
}
const App = () => {
return (
<Wizard>
<FirstStep />
<SecondStep />
</Wizard>
)
}
This does not render the steps
This does work