How to structure survey app?
Unanswered
Oriental posted this in #help-forum
OrientalOP
I am completely new to React and Next. I am using it for a volunteer project to make a basic survey web app. Basically I pull ~175 questions out of a google spreadsheet and then I need to show them to the user based on their category. Currently I can show a questions group on my page and am looking for advice on how to update the component that holds my question group. To be clear I get all of the questions in one request to the spreadsheet then have them all stored inside an object. I attempted to implement "use state" but it requires "use client", but when I add the "use client" directive it breaks my getData() function. Also during my research it seems like you aren't even supposed to use the "use effect" stuff in the app router? So basically, how do I make my component display a different question group when I click my button?
4 Replies
American Crow
You are on the right track.
You just can not have everything in one file.
Your
Your QuestionDisplay and QuestionGroupDisplay are in their own file(s). Both
Your
You just can not have everything in one file.
Your
Home Component and the getData function should be in a own file (page.jsx). This is your server component which fetches the data.Your QuestionDisplay and QuestionGroupDisplay are in their own file(s). Both
"use client" at the top. Those are client components. Now you can use state in those two.Your
Home Component fetches the data and passes it down to <QuestoinDisplay data={data} /> and QuestionGroupDisplay@American Crow You are on the right track.
You just can not have everything in one file.
Your `Home` Component and the `getData` function should be in a own file (`page.jsx`). This is your server component which fetches the data.
Your QuestionDisplay and QuestionGroupDisplay are in their own file(s). Both `"use client"` at the top. Those are client components. Now you can use state in those two.
Your `Home` Component fetches the data and passes it down to `<QuestoinDisplay data={data} />` and QuestionGroupDisplay
OrientalOP
Thank you. Why is the home component a server component?
American Crow
To put it simply you go with a server component as default. (if you don't declare 'use client' that's the default, that makes it a server component). If you need interactivity in the form of state or event handlers (onclick etc.) you have to make that component 'use client'.
OrientalOP
Ok thank you