This is my profile settings page: Code
My buttons already call onClick function, but i wanna add saveInfo to my "save" button.
I just noticed that after clicking "save" the only field that remains saved is First Name, can you explain to me why?
I adjusted your code for this to work properly.
Here is an updated sandbox https://codesandbox.io/s/charming-kapitsa-kznoi?file=/src/UserInfo.js
I extracted all of your additional code so it would be easier for me to debug, which is why you won't see some of the code in your original example.
Quite simply, the issue was that you were rendering an empty <input> when saved was not true.
If you want to send your saveInfo simply set the value of each input (when saved isn't true) to the value of your saveInfo.
I left comments within to help understand.
Related
I am implementing a form in react using react hook form, The form has two select fields country and states.
Second field changes the option based on the selection in first field.
Please see the below sandbox for more details
Creating/submitting the record works perfectly fine.
The problem is: In edit, when I pre populate the values in the form using setValue(), it does not set the second dropdown(state select in the sandbox below) values on the UI but it shows that it has set the value to the field(see in the console for field state).
[CodeSandBox] https://codesandbox.io/s/angry-murdock-h0lbsp?file=/src/App.js
Steps to reproduce:
Open this sandbox in the browser.
Click on the SET ALL VALUES button.
See the blank value in states select
Also, Whats the best way to populate a form like this, i.e. in defaultsValues or useEffect?
What am I missing here, so putting it for the experts here.
Thanks for your time.
The problem you are having is about setValue. This function does not trigger a re-render in most cases. You can use reset instead.
https://react-hook-form.com/api/useform/reset
Also, if you'd like to fill the form without any user interaction, use reset in useEffect with proper dependencies.
Lastly, If you'd like to have just them having initial values instead of being undefined, set defaultValues. It is also recommended in official documents:
Important: You should provide a proper default value and avoid undefined.
undefined is reserved for fallback from inline
defaultValue/defaultChecked to hook level defaultValues. undefined value is conflicting with controlled component as default state
https://react-hook-form.com/api/useform
I posted this question on react-hook-form issues but thought of posting here too in case anyone found a solution for it.
I'm having this problem with isValid state when using react-hook-form on a stepper. The state of isValid seems a bit messed up when we use a back button. For example, if first step is valid and you go on to the next, trigger an error and go back, isValid will be false even though the first step is still valid.
This is a problem because I would like to use isValid as the state for the 'next' button to be disabled or not.
Is there any suggestions how to get this working or is it a bug?
Or is there another suggestion for what variable to use to disable the button?
Steps to reproduce
Go to this CSB https://codesandbox.io/s/heuristic-lehmann-df6hmw
Enter first name
Enter last name
Click Next
Don't fill in address, click Next to trigger error
Click Back
See that Next button is greyed out on first step, even though the step is still valid.
Expected behaviour
isValid should match the valid state of current step
React hook form version: 6.14.0 but also seen on 7.33.0
EDIT:
For anyone having the same problem.. someone answered my question on react-hook -form's discussion page.
Add to each step a dummy hidden input with shouldUnregister: true and unique name
<input
type="hidden"
{...register("step1", {
shouldUnregister: true
})}
/>
This makes the isValid state somehow refresh when going backwards and forwards in the stepper.
CSB with this solution, see different step components: https://codesandbox.io/s/jovial-swartz-t31nu3?file=/src/steps/Step1.js:299-419
Github discussion: https://github.com/react-hook-form/react-hook-form/discussions/8787
I have an ArticleFields component that loads an article object (through location.state) which has either empty parameters(when i try to make a new article) or preexisting values when i want to edit an article.My inputs though, won't change when i pass a preexisting value,even if it's an empty string.On the other hand ,the onChange function still works for textarea.Any ideas to why is this happening,i know i can just change the inputs to textareas,but ofcourse i want to understand why this is happening first
Here is a sandbox for reference
https://codesandbox.io/s/green-sound-sopdvp?file=/src/App.js
Use defaultValue instead of value:
value={article.title}
I am following React & Redux. I have actions, reducers working separately. I am managing state more or less properly.
I am trying to create a ui which is having few textboxes and a button(disabled). In text boxes i had added onchange event on which it call a function
onChangeTextbox(){
}
In this function I do the following thing.
1. I update the state of the redux store.
onChangeTextbox(){
updateStateOfTextBox();
}
2.After doing this I look for whether all the text boxes, in the ui, is having something in it. If so I will enable my button to do further operations.
onChangeTextbox(){
updateStateOfTextBox();
updateStateOfButton();
}
Everything is working good except the one thing.
That one thing is as soon as I give the last empty textbox one character, the button is not enabled immediately, and when I give more character the button gets enabled. Similarly vice versa for disabling button.
The problem which I found is that when control complete its job of function updateStateOfTextBox(); and enters the updateStateOfButton(); function the state remains same. And again when render() occurs the change in state is reflected then.
I want to fix that issue and I am not getting any way out. Any solution and suggestion to this will be appreciated.
Thanks.
I found the solution to such situation.
componentsWillRecieveProps(newProps){
}
this method of the life cycle changes the game.
componentsWillRecieveProps(newProps){
newProps.state // this will give you new updated state which your action updated.
this.props.state // this will give you local or your state
// Here you can update your local state with global state
// And call the other function here as
updateStateOfButton();
}
Therefore the solution can be interpreted like
onChangeTextbox(){
updateStateOfTextBox();
}
componentsWillRecieveProps(newProps){
.
.
updateStateOfButton();
}
When submitting the form the form data have saved and Form comes in dirty state.
I want to prestine the form again. Below is the dirty state of form
if I use Form.prestine form comes with existing values as given below:
I want to set form prestine with empty fields how it can possible?
It means if once I have submitted the form next time on add button click form will open with new fields. Please help !
You may use $setPristine();
Take a look at the Angular form.FormController docs as well as this example:
http://plnkr.co/edit/815Bml?p=preview