question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Errors properties off by one render outside render

See original GitHub issue

Describe the bug When we need to do something after the validation (in another function) is done, it seems like errors-properties are off by one render on their values.

To Reproduce Steps to reproduce the behavior:

  1. Open console (to see output)
  2. Go to firstName input-field
  3. Remove John
  4. Insert a single space-character ’ ’
  5. Click outside input-field (to trigger onBlur)
  6. Look at console-output
  7. Go to firstName input-field
  8. Remove the single space and leave input blank
  9. Click outside input-field (to trigger onBlur)
  10. Look at console-output

Codesandbox link (Required) https://codesandbox.io/s/small-thunder-nq0t4

Expected behavior Expected that errors.firstName contains the error as the same as error does in the console.

Screenshots image (Image above) This one shows that errors contains the correct error, but errors.firstName is undefined. Should not say Do something. The UI-error is correct.

image (Image above) This one shows that errors contains the correct error, but errors.firstName is errors previous value. Should say Don't do something. The UI-error is correct.

Additional context Have tried the same in JS (not TS) same result. Tested on version: 7.2.2 and 7.1.1

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:18 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
MercurialWebcommented, Apr 22, 2021

Can’t reproduce the error on CodeSandbox, maybe there is something else conflicting in my project. So i confirm that all problems gone with this v7.2.4-beta.0

EDIT: For who has the same problem. The new version has spread {…register} with onChange prop, so if you need to define onChange conditionally, define before the {…register}.

1reaction
kongebracommented, Apr 22, 2021

Another way is using useEffect with formState as dep and check the errors object, achievable but a bit more difficult.

Looked at that solution earlier, but got nasty when our forms are getting bigger.

you can try with this beta: v7.2.4-beta.0

https://codesandbox.io/s/throbbing-snow-ji72p

Seems like it works nicely! Tested in codesandbox.io and on my local project.

Had to change from e.currentTarget.value to e.target.value Cause the currentTarget is null. Guess it has something to do with the async, but not any issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

4 Common render problems in Blender and how to solve them
If an object is missing in your final render there are primarily two reasons. The first one is that the object could have...
Read more >
A Guide to Common React Errors
Error : Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Read more >
Not able to call a method outside render from a function inside ...
In your case ,state declared as a class properties and not an instance property. state = {} //class property will not available on...
Read more >
How to Read React Errors (fix 'Cannot read property of ...
Got an error like this in your React component? ... TypeError: Cannot read property 'map' of undefined at App (App.js:9) at renderWithHooks ......
Read more >
React error handling with react-error-boundary - LogRocket Blog
So error boundaries only catch errors that occur in a lifecycle method, render method, and inside Hooks like useEffect .
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found