Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: Cannot update a component (LoginPage) while rendering a different component (ForwardRef). To locate the bad setState() call inside ForwardRef, follow the stack trace as described in https://reactjs.org/link/setstate-in-render #320

Open
vigneshkumaran-github opened this issue Nov 16, 2023 · 6 comments

Comments

@vigneshkumaran-github
Copy link

When i try to enter numbers im geting this errors

@ankitthakur34
Copy link

Yes, Same Problem

1 similar comment
@tahahaz1374
Copy link

Yes, Same Problem

@sami-juvonen
Copy link

+1

1 similar comment
@eldynguyen1204
Copy link

+1

@yogeshmuli
Copy link

yogeshmuli commented Apr 17, 2024

I was able to fix this by wrapping my setState logic in setTimeout function,Here is my code.
`
const handleChange = code => {
setTimeout(() => {
setCode(code);
}, 0);
};

//and in render
<OtpInputs
handleChange={handleChange}
keyboardType="phone-pad"
selectTextOnFocus={false}
numberOfInputs={6}
inputContainerStyles={{
justifyContent: 'center',
flexDirection: 'row',
flex: 1,
paddingHorizontal: -4,
}}
inputStyles={{
backgroundColor: '#EDEDED',
borderColor: '#D3D3D3',
borderWidth: 1,
borderStyle: 'solid',
flex: 1,
margin: 4,
height: 52,
textAlign: 'center',
}}
/>
`

Hope this helps anyone, till the time it is fixed

@vigneshkumaran-github
Copy link
Author

@yogeshmuli could u tell me the reason please , why should i wrap that into setTimeout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants