How do I update the default values once the API has been called?
This is what I want to achieve:
I have a card where I can see a comment.
There is a button that toggles a textField that allows me to add/edit/delete a comment
I can also discard changes I was making before saving an edition, to do so I will show the original defaultValues
Now let's say I've already left a comment Comment test 1, so when the card is rendered it will show the comment by using the injected data of the defaultValues. I edit the comment to Comment test 2, and click save, now the comment shown comes from the state value, not from the default values. Now I want to edit to Comment Test 3, but I change my mind and discard the changes. Now the card will show default values Comment Test 1, while it should show Comment Test 2.
So I guess there's a way to update the defaultValues once the API has been called, I have tried on success to use
resetField('comment', { defaultValue: { ...comment } });, but the default comment is not updated.
What would be a better approach to the problem?
What you can do is, storing the values you save in a variable (e.g. overwrittenForm) Than use the formContext.reset(overwrittenForm) from the useForm hook and pass it the variable to reset to the latest state.
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 am trying to create a calculator app using React JS. Even though the app is almost complete, I have one small bug. When the clear button is clicked, the numbers on screen becomes 0 but then after if any number key is pressed, the previous number reappears. Here is the code snippet of my app. I guess the bug is present in Display.js file or App.js file.
How to fix this bug?
Thanks in advance!!!
According to your codepen, you need to reset "value" inside of "NumberPad" component.
I've used a useEffect to check if "value" in app.js is set to 0, if so, it sets the "value" in "NumberPad" component as "0".
For your reference:
https://codesandbox.io/s/runtime-wildflower-zt0rv?file=/src/Components/NumberPad.js
The problem is, in NumberPad.js, the handleNumberClick function calls the number function with its own state.
Your clear button has no link to the state saved in the NumberPad
What you can do is lift the state up to App.js so you have only one source of truth for the display to show
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.
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