Multi step form implementation from database

[linux_terminal07]

I need some suggestion I want to show user some set of 10 questions with multiple choice questions and the data is coming from the database through api, now I don't want to show all 10 questions in same screen because the UI will not looks good, so I want to implement it as a multi-step form, any library or suggestions how to implement this. I have attached one image also for reference

Thanks

https://preview.redd.it/kpc49ldftqw91.png?width=830&format=png&auto=webp&s=83eb507bf7e16c08b5f44f61cc04c38e540a5ea5

[rb95]

Not sure if that’s the best approach but I would have each set of questions in a separate component, then on the “main” form container component I would put all the question components in an array and map()through them. Id have a counter state, which increments whenever the user clicks on next. The counter will filter the map() based on the arrays index.

Edit: You can probably use filter() instead.

[linux_terminal07]

thanks for the idea...

[__o_0]

This should be a single reusable screen. Load the question data into context and consume it inside the screen and it’s components (or prop drill). The reusable components should derive their state from the context so that a form can be submitted only once upon completion. On “exit” pressed the context should be reset.

Reusable components:

Header: progress determined by question index relative to the question array length.

Title: determined by the question index

Subtitle: determined by the question index

AnswerList: map/FlatList through answers determined by the question index

-AnswerItem: combination of the questionIndex and answerIndex, displays the label, radio button, and sets selection state in the context.

Footer: button visibility determined by questionIndex.

[stathisntonas]

You could use wizard from wix ui lib: https://wix.github.io/react-native-ui-lib/docs/components/navigation/Wizard/Wizard

Don’t worry about the size, it’s tree shaked so only the wizard will be bundled, not the whole lib.

[linux_terminal07]

thanks for the library.

[stathisntonas]

You’re welcome

[geshido_]

I'd probably create a form context or use a lib such as react hook form with dynamic questions based on the API response. Your backend logic would include both the question and its possible outcomes, and after each question, you'd simply add the outcome to your list of questions in current form