State is not being updated
Answered
Cape lion posted this in #help-forum
Cape lionOP
Hello guys...
I'm against that, on React context... It may look some trivial i think...
the following function
is inside the main component, which returns
All are being maped and rendered right, the function is called on click, as expected....
The point is the state of 'selectedPiece' , that is not being changed.
I can't figure out why, if anyone has a clue, it will be appreciate.
Thanks.
I'm against that, on React context... It may look some trivial i think...
the following function
const [selectedPiece, setSelectedPiece] = useState(null);
const handleSquareClick = (square) => {
if (square.id) {
setSelectedPiece(square);
console.log(selectedPiece);
if (selectedPiece) {
if (isMoveValid(selectedPiece, square, board)) {
movePiece(selectedPiece, square);
}
}
else {
setSelectedPiece(null);
}
} else if (square.piece) {
// Select a piece if clicked on
setSelectedPiece(square);
}
}; is inside the main component, which returns
<Square
key={square.id}
square={square}
onClick={() => handleSquareClick(square)}
isSelected={selectedPiece?.id === square.id}
/>All are being maped and rendered right, the function is called on click, as expected....
The point is the state of 'selectedPiece' , that is not being changed.
I can't figure out why, if anyone has a clue, it will be appreciate.
Thanks.
Answered by B33fb0n3
@Cape lion I just tested a bit and it looks like it's working fine (see attached). Your console.log does not show the new value, because react does not work like that. React changes the value after the function has fully ended. That's why I can access the new value when I click on a button after the change was made.
If you need to directly access it, use the "square" variable (or however the variable is named, that will be set)
If you need to directly access it, use the "square" variable (or however the variable is named, that will be set)
12 Replies
@Cape lion Hello guys...
I'm against that, on React context... It may look some trivial i think...
the following function
const [selectedPiece, setSelectedPiece] = useState(null);
const handleSquareClick = (square) => {
if (square.id) {
setSelectedPiece(square);
console.log(selectedPiece);
if (selectedPiece) {
if (isMoveValid(selectedPiece, square, board)) {
movePiece(selectedPiece, square);
}
}
else {
setSelectedPiece(null);
}
} else if (square.piece) {
// Select a piece if clicked on
setSelectedPiece(square);
}
};
is inside the main component, which returns
<Square
key={square.id}
square={square}
onClick={() => handleSquareClick(square)}
isSelected={selectedPiece?.id === square.id}
/>
All are being maped and rendered right, the function is called on click, as expected....
The point is the state of 'selectedPiece' , that is not being changed.
I can't figure out why, if anyone has a clue, it will be appreciate.
Thanks.
debug a little. I guess the error comes from a closure, but we only know that better when you log a little bit. Check for closures
@B33fb0n3 debug a little. I guess the error comes from a closure, but we only know that better when you log a little bit. Check for closures
Cape lionOP
Yes, all is right in closures... The function handleSqaureClick is being called normally, as mentioned...
@Cape lion Yes, all is right in closures... The function handleSqaureClick is being called normally, as mentioned...
can you provide a repro of the issue, so we can debug a little bit while you are offline?
@B33fb0n3 can you provide a repro of the issue, so we can debug a little bit while you are offline?
Cape lionOP
gimme a second
Should I do a screencast?
@Cape lion Should I do a screencast?
no, a reproduction
For example via github or https://codesandbox.io/
It don't need to be your current project, but rather a reproduction of the issue. So code that reproduces the issue
It don't need to be your current project, but rather a reproduction of the issue. So code that reproduces the issue
@Cape lion basically
https://stackblitz.com/edit/react-1s2lkfzh?file=src%2FApp.js
great 👍
What do I need to do, to reproduce the issue?
What do I need to do, to reproduce the issue?
@Cape lion I just tested a bit and it looks like it's working fine (see attached). Your console.log does not show the new value, because react does not work like that. React changes the value after the function has fully ended. That's why I can access the new value when I click on a button after the change was made.
If you need to directly access it, use the "square" variable (or however the variable is named, that will be set)
If you need to directly access it, use the "square" variable (or however the variable is named, that will be set)
Answer
happy to help