useState from TRPC Query
Hi - this is a noob question sorry. I'm wanting to create a dropdown of all the values returned by a query i.e. groups but I can't do a useState as I get Error: Rendered more hooks than during the previous render.
This is my code:
9 Replies
It's already a state
Why are you trying to make a state based on it
I'm wanting to create a dropdown with select / option then run a useEffect to reupdate the data
I think I"ve gotten myself confused sorry
putting the item in a useState isn't the worst thing, but a better approach is to just store the item's id in state
though the reason you're getting that error is bc you're returning early before declaring the useState
your components can't return until all their hooks have been called or you will get that error
I still don't get what this code is trying to do
Can't you just, let it be uncontrolled
At the moment I just wanted a dropdown with all the values with the ability to see the current one
Ah
Just move the state up and do it like a normal controlled input
And set the state in the onsuccess
Don't use onSuccess, it's being removed https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#state-syncing
just split the form into it's own component and pass the data to that component where you put pass the data as the default value to useState. Here's an example https://tkdodo.eu/blog/react-query-and-forms#data-might-be-undefined
React Query and Forms
Forms tend to blur the line between server and client state, so let's see how that plays together with React Query.
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.