Next.js Discord

Discord Forum

useState not working as expected

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
"use client";

import Image from "next/image";
import { Suspense } from "react";
import { useState } from "react";

export default function Home() {
  const [discordUserId, setDiscordUserId] = useState("1104076205105365064");

  function handleUpdate() {
    const input = document.getElementById("discordUserId") as HTMLInputElement;
    setDiscordUserId(input.value);
    console.log("Updated discordUserId to " + input.value);
  }

  return (
    <main className="flex min-h-screen flex-col items-center space-y-8 p-24">
      <h1 className="text-4xl text-white">discord avatar generator</h1>
      <img
        className="h-48 w-48 rounded-xl"
        src={"/discord/avatar/" + discordUserId}
        width={512}
        height={512}
        alt="discord avatar"
      />
      <input
        className="bg-pillBackground px-4 py-2 rounded-full w-full max-w-2xl text-foreground ring-foreground outline-foreground caret-foreground placeholder-secondaryForeground"
        defaultValue="1104076205105365064"
        placeholder="Discord User ID"
        type="text"
        autoFocus
        id="discordUserId"
      ></input>
      <button
        className="bg-magenta px-12 py-2 rounded-full transition-all ring-0 outline-none hover:bg-magenta/75 hover:text-primaryForeground/75 text-primaryForeground"
        onClick={handleUpdate}
      >
        Update
      </button>
    </main>
  );
}


In theory, simple code, yet it does not work as expected?
Answered by Northeast Congo Lion
+1 to useRef.

You could also store input value in state, and for input add onChange={(e) => setDiscordId(e.target.value)}

then modify handleUpdate like

const [ discordId, setDiscordId ] = useState(); 

handleUpdate() {
  console.log("Updated discordUserId to " + discordId);
}
View full answer

5 Replies

Pearls
Im not sure if it will be the solution, but i noticed that you are using document.getElementById, in react it is generally a better practice to use useRef.
@Pearls Im not sure if it will be the solution, but i noticed that you are using document.getElementById, in react it is generally a better practice to use useRef.
Northeast Congo Lion
+1 to useRef.

You could also store input value in state, and for input add onChange={(e) => setDiscordId(e.target.value)}

then modify handleUpdate like

const [ discordId, setDiscordId ] = useState(); 

handleUpdate() {
  console.log("Updated discordUserId to " + discordId);
}
Answer
Northeast Congo Lion
I also noticed you have put a closing tag on input. Input is a self closing tag like so <input ... />.
Australian Freshwater CrocodileOP
Something went on and when I reran the server it started working again, so unknown issue.