useState does not change the value
Unanswered
Ivao Camiloto posted this in #help-forum
Good evening everyone!
I'm setting up a Kanban system with Next.js and Postgreat, but I'm having problems when trying to change the state of a variable. See the function snippet below:
const [mouseIsOver, setMouseIsOver] = useState(false);
const [modoEdicao, setModoEdicao] = useState(false);
const toggleEditMode = () => {
setEditMode((prev) => !prev);
setMouseIsOver(false); }
if(editMode) {
return #Unknown Channel Hello</>
}
return (
<div onClick={toggleEditMode} className=""> ..... </div>
However, when I click on the Div and activate onClick, setEditMode does not change the value to true. I have no error message in the console or in the terminal. When I test it, using useEffects, I see that the value was not changed. Any solution or light? Help me!
I'm setting up a Kanban system with Next.js and Postgreat, but I'm having problems when trying to change the state of a variable. See the function snippet below:
const [mouseIsOver, setMouseIsOver] = useState(false);
const [modoEdicao, setModoEdicao] = useState(false);
const toggleEditMode = () => {
setEditMode((prev) => !prev);
setMouseIsOver(false); }
if(editMode) {
return #Unknown Channel Hello</>
}
return (
<div onClick={toggleEditMode} className=""> ..... </div>
However, when I click on the Div and activate onClick, setEditMode does not change the value to true. I have no error message in the console or in the terminal. When I test it, using useEffects, I see that the value was not changed. Any solution or light? Help me!
17 Replies
change modoEdicao, setModoEdicao to: editMode, setEditMode
const [editMode, setEditMode] = useState(false);
return (<div onClick={() => setEditMode(!editMode)}>
</div>
);take this as a example how you should do it @Ivao Camiloto
a good suggestion from me you should always trigger functions within callbacks
on clientside
Sorry, I sent you the outdated code at that time... I took the opportunity to try to implement your suggestion, with this my code looked like this:
To understand what happens, I'm creating a Kanban, and when I click on div, it deletes the Task. This is happening, however when the Task is deleted in the location it should enter the #Unknown Channel Hello </> of the if editMode. , even doing this update the Task was deleted but the editMode was not executed
function TaskCard({ task, deleteTask }: Props) { const [mouseIsOver, setMouseIsOver] = useState(false) ;
const [editMode, setEditMode] = useState(false);
if (editMode) { return <> Hello </> } return ( <div onClick={() => { setEditMode(!editMode); setMouseIsOver(false); }} className=""> ..... </div> To understand what happens, I'm creating a Kanban, and when I click on div, it deletes the Task. This is happening, however when the Task is deleted in the location it should enter the #Unknown Channel Hello </> of the if editMode. , even doing this update the Task was deleted but the editMode was not executed
two things u can do
first check with useEffect if the edfitMode state triggers and log the result
also conditionally render editMode in the return statement
return (
<>
{editMode ? (
<>Hello</>
) : (
<div
onClick={() => {
setEditMode(!editMode);
setMouseIsOver(false);
}}
>
</div>
)}
</>
);something like this @Ivao Camiloto
See:
The card appears when I click on the "+ add card" button
const [editMode, setEditMode] = useState(true); const [editMode, setEditMode] = useState(false);The card appears when I click on the "+ add card" button
@Ivao Camiloto See: const [editMode, setEditMode] = useState(true);
It renders the <>Hello</> when added to the screen. See: const [editMode, setEditMode] = useState(false);
It executes the other code snippet normally. See a quick example.
The card appears when I click on the "+ add card" button
yes when the initial state is true ofc it renders hello
try the snippet i gave u
and should call the function setEditMode(!editMode); when clicking on the div changing the state of setEditMode to true
@gin try the snippet i gave u
That Ok, 1s
The code adapted to work with your snipped
However, there is no change in the result when calling the code to change the state of setEditMode. It remains false even when calling
setEditMode(!editMode);
return (
<>
{editMode ? (
<>Hello</>
) : (
<div onClick={() => {
setEditMode(!editMode);
setMouseIsOver(false);
}} className="
p-2.5
h-[100px]
min-h-[100px]
items-center
flex
text-left
rounded-xl
hover:ring-2
hover:ring-inset
hover:ring-rose-500
cursos-grab
relative
"
onMouseEnter={() => {
setMouseIsOver(true);
}}
onMouseLeave={() => {
setMouseIsOver(false)
}}
>{task.content} {mouseIsOver && (<button onClick={() => {
deleteTask(task.id);
}} className="stroke-black
absolute
right-4
top-1/2
-translate-y-1/2
p-2
rounded
opacity-60
hover:opacity-100"> <TrashIcon className="h-[1.3rem]" /> </button>)}
</div>
)}
</>)However, there is no change in the result when calling the code to change the state of setEditMode. It remains false even when calling
setEditMode(!editMode);