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>
        </>
    )
}

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>
        </>
    )
}

Tthorin_17 Hi - this is a noob question sorry. I'm wanting to create a dropdown of all the ...

barry•7/27/23, 9:42 AM

It's already a state

barry•7/27/23, 9:42 AM

Why are you trying to make a state based on it

thorin_17OP•7/27/23, 9:43 AM

I'm wanting to create a dropdown with select / option then run a useEffect to reupdate the data

thorin_17OP•7/27/23, 9:43 AM

I think I"ve gotten myself confused sorry

Brendonovich•7/27/23, 9:43 AM

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

Brendonovich•7/27/23, 9:44 AM

though the reason you're getting that error is bc you're returning early before declaring the useState

Brendonovich•7/27/23, 9:44 AM

your components can't return until all their hooks have been called or you will get that error

barry•7/27/23, 9:45 AM

I still don't get what this code is trying to do

thorin_17OP•7/27/23, 9:45 AM

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•7/27/23, 9:46 AM

Can't you just, let it be uncontrolled

thorin_17OP•7/27/23, 9:46 AM

At the moment I just wanted a dropdown with all the values with the ability to see the current one

barry•7/27/23, 9:46 AM

barry•7/27/23, 9:47 AM

Just move the state up and do it like a normal controlled input

barry•7/27/23, 9:49 AM

And set the state in the onsuccess

Ramsay•7/28/23, 12:10 AM

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.

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> </> ) }

useState from TRPC Query

Similar Threads

Similar Threads

Similar Threads