TTC
Theo's Typesafe Cult•2y ago
thorin_17

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: 
import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0])

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
        </>
    )
}
import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0])

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
        </>
    )
}
9 Replies
barry
barry•2y ago
It's already a state Why are you trying to make a state based on it
thorin_17
thorin_17OP•2y ago
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
Brendonovich
Brendonovich•2y ago
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
barry
barry•2y ago
I still don't get what this code is trying to do
thorin_17
thorin_17OP•2y ago
import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0]?.id)

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
            <select name="group" value={group}>
                {groups.data.map(option => {
                    <option id={option.id} value={option.id}>{option.name}</option>
                })}
            </select>
        </>
    )
}
import Head from "next/head";
import { useState } from "react";
import Header from "~/components/header";
import { api } from "~/utils/api";

export default function Admin() {
    const groups = api.group.getAll.useQuery();

    if (!groups.data) return <p>No Data</p>
    if (groups.error) return <p>Error</p>

    const [group, setGroup] = useState(groups.data[0]?.id)

    return (
        <>
            <Head>
                <title>Admin | Group</title>
            </Head>
            <Header pageTitle="Admin"/>
            <p>Admin index page</p>
            <select name="group" value={group}>
                {groups.data.map(option => {
                    <option id={option.id} value={option.id}>{option.name}</option>
                })}
            </select>
        </>
    )
}
barry
barry•2y ago
Can't you just, let it be uncontrolled
thorin_17
thorin_17OP•2y ago
At the moment I just wanted a dropdown with all the values with the ability to see the current one
barry
barry•2y ago
Ah Just move the state up and do it like a normal controlled input And set the state in the onsuccess
Ramsay
Ramsay•2y ago
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.

Did you find this page helpful?