Is there a best practice to conditionally render different steps of the joy-ride with fetch data in Next?

[aiet7]

I am trying to conditionally render the joyride between when a client authenticates his API keys. These keys are sent to the backend and return an object of true/false when user is successfully authenticated. Now the UI changes based on these true/false variables. Is there somewhere you can point me or explain to me the best and optimal way of conditionally rendering joy-ride steps? Currently I am experiencing "nodeName" errors. Let me know if you need more information, code snippets etc.

[gilbarbara]

Hey @aiet7

There isn't a single optimal way to do it since it depends on the context.
If the users need to authenticate before seeing a tour, I would only render the Joyride component when you're ready to build the final steps.
You could have all the "steps" with an id property that matches your API response. Once you have the data, filter/map this list to match the Steps required/allowed properties.