useState html attr not updating
Answered
Anay-208 posted this in #help-forum
Anay-208OP
I'm sharing the shortest part of my code:
I've used
However, the disabled is not going away. What can I do to fix?
const [oAuthsLoaded, setoAuthsLoaded] = useState<("google" | "discord")[]>(
[],
);
useEffect(() => {
console.log(oAuthsLoaded, oAuthsLoaded.length);
}, [oAuthsLoaded]);
<button
disabled={oAuthsLoaded.length > 0}
onClick={handleSignIn}
className="w-fit rounded-full bg-white p-1"
>
<Script
onLoad={() => setoAuthsLoaded(loaded => ([...loaded, "google"]))}
src="https://accounts.google.com/gsi/client"
async
defer
></Script>I've used
.length > 0 on purpose.However, the disabled is not going away. What can I do to fix?
30 Replies
Anay-208OP
Bump
@Anay-208 Bump
is oauth getting logged correctly?
wait u arent returning
Anay-208OP
I see a item “google”
@Arinji wait u arent returning
Anay-208OP
I m returning while setting
wha
const [oAuthsLoaded, setoAuthsLoaded] = useState<("google" | "discord")[]>(
[],
);
useEffect(() => {
console.log(oAuthsLoaded, oAuthsLoaded.length);
}, [oAuthsLoaded]);
return (
<>
<button
disabled={oAuthsLoaded.length > 0}
onClick={handleSignIn}
className="w-fit rounded-full bg-white p-1"
>
<Script
onLoad={() => setoAuthsLoaded(loaded => ([...loaded, "google"]))}
src="https://accounts.google.com/gsi/client"
async
defer
></Script>
</>
);try that maybe
@Arinji tsx
const [oAuthsLoaded, setoAuthsLoaded] = useState<("google" | "discord")[]>(
[],
);
useEffect(() => {
console.log(oAuthsLoaded, oAuthsLoaded.length);
}, [oAuthsLoaded]);
return (
<>
<button
disabled={oAuthsLoaded.length > 0}
onClick={handleSignIn}
className="w-fit rounded-full bg-white p-1"
>
<Script
onLoad={() => setoAuthsLoaded(loaded => ([...loaded, "google"]))}
src="https://accounts.google.com/gsi/client"
async
defer
></Script>
</>
);
Anay-208OP
I literally told that I’ve shared a short part of my code
@Arinji try that maybe
Anay-208OP
I literally also stated this disabled isn’t going away
@Anay-208 I literally told that I’ve shared a short part of my code
you didnt say it was different parts of your code?
you just said "its a snippet of your code"
and then put it all in one block so it looks like its one of after the other
Anay-208OP
Isn’t that exactly what shortest means
nope? it just means its a snippet of your code, then ideally you put it in differnt blocks showing the different parts
i cant just say "this is a snippet of my code"
and then say the first line is in my pages dir, the rest is in my app dir
import Router from "next/router"
const router = useRouter();
router.push();and then say the first line is in my pages dir, the rest is in my app dir
but fine, no clue on my side.. wait for Ray ig
Knopper gall
Can you show me your
<Script /> component, please?@Anay-208
@Knopper gall Can you show me your `<Script />` component, please?
Anay-208OP
It’s imported from next js
Knopper gall
ok, just was wondering if onLoad was being set properly that's all
if you do a console log in the onload you get that, right
Anay-208OP
Yes
Knopper gall
does your useEffect trigger after the onload event?
(it depends on the state changing, so this narrows down if the state is being manipulated)
(it depends on the state changing, so this narrows down if the state is being manipulated)
Hold on, I realized I made a typo in condition
Anay-208OP
the condition should be:
disabled={oAuthsLoaded.length <= 0}Answer
Anay-208OP
sorry for my dumb mistake
Knopper gall
I was literally just about to say, your wording doesn't match your code 😛