how to edit the form with data from the server ?

[vathuluri]

Hello, thank for this library.

Im trying to create a form with new and edits. How to change the state of the form in edit scenario when the data is coming from a service call. Is there better way to deserialize the data and assign the values rather than assigning it individually ?

Also, is there a way to ignore an element from the serialization

[psaia]

Im trying to create a form with new and edits. How to change the state of the form in edit scenario when the data is coming from a service call. Is there better way to deserialize the data and assign the values rather than assigning it individually ?

If you mean something like <form values={inputValues} ..., then no. This library doesn't offer this level of abstraction since doing this kind of thing can have restricting side effects.

Also, is there a way to ignore an element from the serialization

Without knowing too much detail - just use a non-serial-forms input instead.

[vathuluri]

Thank you for the suggestion on non-serial-forms input .

I tried assigning values manually like you did in your demo using lateLoaderProps but when I change the value in one input field the rest of the fields in the form are loosing their values. Is it how it works or am I doing something wrong? I feel like on change it is doing self.forceUpdate() and everything gets cleared?

[psaia]

You're likely using the value attribute and not the defaultValue attribute which is the difference between controlled and non-controlled fields. Serial Forms supports either.

https://facebook.github.io/react/docs/forms.html#controlled-components

[vathuluri]

I used both, but the result is still the same

[psaia]

If you're using value then you need to maintain the state manually with onChange. If not, then the input should maintain its own state. If it's losing the value all together, there is something else at play causing the issue that will be hard to debug without seeing code.

[vathuluri]

Thanks pete, I appreciate your time responding to this issue. sure thing, I just recreated your demo app using predefined values calling from a server. Its the same code as your demo. If you add another field in your demo using another fake ajax call you will see it happening.

[psaia]

No problem. Unfortunately, my hands are tied at the moment, but I will try to set up a case study as an example a little later. Just to be clear though, defaultValue is only meant to set the initial value. This will only happen one time and it won't change the value after it's already set. This is a convention made by React. If you want to have the inputs be uncontrolled (not use value), I would show a pre-loader until your ajax request resolves so your inputs have their defaultValue's upon mounting. Otherwise, it will be a rather jolting experience having your values jump in randomly.

[vathuluri]

Thanks Pete.