Sun「無用」 Posts - Answer Overflow

Sun「無用」

Explore posts from servers

CC#SSolidJS PPrisma HHono DTDrizzle Team

•Created by Sun「無用」 on 5/5/2024 in #help

Setting up Client Components

I'm trying to setup a simple counter client component, code can be seen below. Code is minimal so it's easy to test it (first time using client components on hono) When using the example given in the docs, an "obvious" error that document is not defined would happen, since I'm in the server. Code:

function Counter({start}) {
  const [count, setCount] = useState(start ?? 0);

  useEffect(() => {
    console.log(`Count is now ${count}`)
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  )
}

app.get("/counter", async (c) => [
  const counterState = await db.getCounterState()

  // Does not update properly, just stays at 0 forever.
  return c.html(<Counter start={counterState} />);
})

function Counter({start}) {
  const [count, setCount] = useState(start ?? 0);

  useEffect(() => {
    console.log(`Count is now ${count}`)
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  )
}

app.get("/counter", async (c) => [
  const counterState = await db.getCounterState()

  // Does not update properly, just stays at 0 forever.
  return c.html(<Counter start={counterState} />);
})

5 replies

Gaming

Programming