0

I tried updating a state value using its setter from the useState hook, but it wouldn't update. The same setter is working in a different function while setting the value true.

To make sure that the function call was proper, I tried updating a different state from the the faultering function and it works!

I have been whacking my head as to why that particular state is not updating to a boolean false value.

const initialFormState = {
  0: { a: null, b: 0.0, c: 0.0 }
};
const [form, setForm] = useState(initialFormState);
const [fileUploadModal, setFileUploadModal] = useState(false);

function openFileInput() {
  setFileUploadModal(true);  // this works fine
}

function closeFileInput() {
  setFileUploadModal(false);   // this doesn't update
  setForm(initialFormState);   // this works fine as well
  console.log(fileUploadModal, form);
}

To sanity check:

useEffect(() => {
  console.log('File open state modified', fileUploadModal);
}, [fileUploadModal]);

This is not updated proving that there is some issue with the state setter.

Rafael Tavares
  • 5,678
  • 4
  • 32
  • 48
Kislaya Mishra
  • 136
  • 1
  • 11
  • 1
    Hi! `setFileUploadModal(false);` will work to set the state member `false`, so something else is going on somewhere else. Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Jan 19 '22 at 10:32
  • 1
    At a guess, you're running into the function component/hook version of [this](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state), but it's a guess without further information. – T.J. Crowder Jan 19 '22 at 10:34
  • How did you conclude `setFileUploadModal(false)` isn't setting the state? – NeERAJ TK Jan 19 '22 at 10:35
  • to answer @NeERAJTK, I have used useEffect to log the same value, it is not updated. Also the second function has a console.log, which though doesn't update immediately due to async nature of setter, on subsequesnt calls also fails to log the updated value. – Kislaya Mishra Jan 19 '22 at 11:29
  • 1
    Thanks @T.J.Crowder . I'll add a min reproducible example. Though there is only one other instance of the setter being called. – Kislaya Mishra Jan 19 '22 at 11:35
  • 2
    @T.J.Crowder you were right, something else was going on somewhere. I was just looking at the wrong place. Just wanted to make sure I wasn't insane, and your answer helped. Thanks and cheers! – Kislaya Mishra Jan 19 '22 at 11:47

1 Answers1

0

So sorry for the question, but the problem was due to a template issue, the click also triggered the function which sets the value to true. The confusion arose because the state update useEffect was not called, and that lead me to different line of investigation. The real issue was the btn click was not propagated properly.

Thanks for the help everyone!

Kislaya Mishra
  • 136
  • 1
  • 11