reactstrap | Simple React Bootstrap 5 components | Frontend Framework library

I think the return value from the Promise inside the then callback does signify that the login operation is successful. But that doesn't mean you will get isAuthenticated as true because your handleSubmit would have been closing over the previous value of isAuthenticated which was false.

You would require to have a custom useEffect which triggers on isAuthenticated and other values that your logic requires.

The following changes should satisfy what you need :-

This just worked for me I hope it will work for you too!

Just went through the problem statement again, and found out that the state initialisation wasn't correct. While using the React Class Components, the state should be initialised inside the constructor. I have tried to make the function chkClick a little simpler and everything is working as per exepctation.

You only imported bootstrap.css, you must import bootstrap's js file if you want to use collapse. And bootstrap's js require jquery and popper. However, react or nextjs doesn't recommend you to use jquery.

You can use one of 2 below libs alternative:

1. react-bootstrap
2. reactstrap

For latest bootstrap 5, you can use BootstrapCDN:

In _document.js, add 2 lines:

I had to look for several solutions (using parent references) but none satisfied me. To solve my problem, I had to resort to redux. Create a state at the level of redux and connect the parent and the childrens to the store. So as soon as the parent validates the submission (using a button) in the onClick function , the state (props if we use mapStateToProps) is modified and the components children and parent are re-rendered; and we can use the componentWillReceiveProps function to detect the changing of the props and submit the form.

The reason is because you are overriding the state handling of the form. What you actually do is you maintain your own state this way. If you want react-hook-form to maintain the state you need to remove the onChange handling in the Input and the useState from your code:

I was able to figure it out. I needed to use the spread operator to get both actionCreators in my matchDispatchToProps

I changed this

You need to use the component, as register isn't working with external controlled components like your component. Check this section in the docs for more information.

You can also omit useState here and let RHF handle the state changes for you.

It may be due to the Modal component. The modal is inside the form and if portal is used to render the modal it may be rendered outside the form. Can you try using form inside the modal and check if it works.