useState does not work (Newbie)
Answered
Large garden bumble bee posted this in #help-forum
Large garden bumble beeOP
I have been dealin with usestate and it shouldnt be that difficutl. I might be a moron, but it wont even work when following the documetnation for something so simple.
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
does not work
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
does not work
Answered by Asian black bear
import React, { useState } from 'react';
export default function Counter(): JSX.Element {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
check this code again.
export default function Counter(): JSX.Element {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
check this code again.
44 Replies
Asian black bear
import React, { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
Check this please.
export default function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
Check this please.
Large garden bumble beeOP
nope made it worse
Asian black bear
show me your screen!
Large garden bumble beeOP
clicked a million times
I hope I am just stupid as bricks, but it should not be that difficult to set up, even when its straight from the docs
Large garden bumble beeOP
@Asian black bear Yo do you see the issue?
Well I take it you do not know what the problem is
Asian black bear
Hello. @Large garden bumble bee In my Computer, this code is right.
Check this image.
Check this image.
Large garden bumble beeOP
Yeah so I am not loosing my mind, the code is soli
solid
I do not know why it does not work, I have been trying ti just make a simple menu bar for mobile devices and went back to the docs and it seems to go beyond that
Is this a common problem or am I the first to come up with this?
Asian black bear
import React, { useState } from 'react';
export default function Counter(): JSX.Element {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
check this code again.
export default function Counter(): JSX.Element {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
check this code again.
Answer
Large garden bumble beeOP
well that does not work. Error due to JSX.Element
THe entire file is JSX
Asian black bear
your code is ts?
Large garden bumble beeOP
No
its jsx
always been using jsx, just never had this problem before
Asian black bear
sorry
import { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
export default Counter;
const Counter = () => {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
)
}
export default Counter;
again please.
Large garden bumble beeOP
Yo its something else
I tried to put in another component, for like I said my entire goal was to make a mobile menu for the navbar
so the code is right.
Asian black bear
Your code is okay?
Large garden bumble beeOP
Yeah it works
Its just not on the navbar so I need to find the solutiin there
Asian black bear
Yeah. Excuse me, you are developer?
Large garden bumble beeOP
Newbie
Says on the post
I am kinda new. I coded back over a year ago before the Next 13. I dont even remember 'user client' was a thing back then
Asian black bear
wow. I am a front-end developer using JS framework. I want to make you a friend. Can I send DM?
Large garden bumble beeOP
sure dude
Asian black bear
sure.
Oh sorry, I will come to the sanitary room!! 10 minutes only...
ðŸ™
Asian black bear
Hello. @Large garden bumble bee
please keep off-topic conversation out of #help-forum threads
@Large garden bumble bee the code you shared should work fine, you will need to share a reproduction of the issue otherwise it might be impossible to figure out what is wrong
here is a minimal template to get started: https://github.com/vercel/next.js/tree/canary/examples/reproduction-template
Large garden bumble beeOP
it works perfectly fine with all js files except the the ones I made in to global components like the navbar.
Large garden bumble beeOP
Never mind I am a moron