16 replies

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

TTC

Theo's Typesafe Cult•3y ago•

16 replies

thorin_17

useState from TRPC Query

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

useState from TRPC Query

Similar Threads

useState from TRPC Query

Similar Threads

Similar Threads

Similar Threads