0

I want to show a div which has an error message from backend. But on changing state variable component does not re render.

const [hasValidationError, setHasValidationError] = useState<boolean>(false);
const [hasSubmissionError, setHasSubmissionError] = useState<boolean>(false);
const handleButtonClick = () => {
if (state.name) {
        setHasSubmissionError(false);
        setHasSubmissionValidationError(false);
        callBackend(id)
            .then((newFoo: Foo[]) => {
                //do something
            })
            .catch((err) => {
                setHasSubmissionError(true); //This is not working
                console.log("In catch"); // this is logging
                console.log(hasSubmissionError); //this is logging false not sure why
            });
    } else {
        setHasValidationError(true); //This is working
// if I do setHasSubmissionError(true); here div starts showing up but if I do this from above catch clause
    }
};
return (
    <div>
        {hasValidationError && (
            <div className={styles.errorDiv}>
                There is a validation error this is showing correctly
            </div>
        )}
        {hasSubmissionError && (
            <div className={styles.errorDiv}>
                There is a submission error this div never shows
            </div>
        )}
        <Input value={state.name}/>
        <Button onClick={setHasValidationError} className={styles.button}>
        </Button>
    </div>
);

I created this react playground https://playcode.io/1539343

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
PUG
  • 4,301
  • 13
  • 73
  • 115
  • Make sure in your `callBackend` function, to throw an error manually when the response is unexpected. – Hao Wu Jul 21 '23 at 02:26
  • Execution is running the catch part of the code for sure and "In catch" is getting logged. So that does mean backend is throwing error correctly. – PUG Jul 21 '23 at 02:33
  • Can you reproduce your question in codesandbox? – Pluto Jul 21 '23 at 02:43
  • `console.log(hasSubmissionError)` prints `false` because the state reference doesn't refresh on the fly. The state should be updated on next render loop. If it doesn't, it is most likely `setHasSubmissionError(false)` got called after the `catch` is triggered. Such as `handleButtonClick` got called again and reset it back to `false`. – Hao Wu Jul 21 '23 at 02:45
  • Are you using axios in callBackend? – Pluto Jul 21 '23 at 02:59
  • I created this react playground https://playcode.io/1539343 – PUG Jul 21 '23 at 03:07
  • I am not using axios – PUG Jul 21 '23 at 03:10
  • @PUG - please see https://codesandbox.io/s/dark-moon-95mw86?file=/src/App.tsx, It's working well. – Pluto Jul 21 '23 at 03:17
  • 1
    @PUG, I think your code is mostly correct. I can't understand why it doesn't work. – Pluto Jul 21 '23 at 03:19
  • @VictorL. Thankyou for creating that. I noticed where I am doing a `setHasValidationError(true);` in else if I do a `setHasSubmissionError(true);` div appears correctly just not from within catch – PUG Jul 21 '23 at 03:25
  • Thankyou all for posting comments especially victor. I managed to solve the problem. The issue was parent component was also rerendering which was resetting the submission flag. The correct way to do this for me was using context and putting a flag there so all components can the value – PUG Jul 21 '23 at 04:39

0 Answers0