Re-Render on value change.

[designspin]

I started using material-ui-form along with Firebase Firestore on a current project, thanks for your hard work.

I'm providing an empty string state for each textfields value in my form via the constructor. Then on componentDidMount i'm retrieving the values from my database and updating the state to the retrieved values. The only thing is the textfields are not updating to the new values, what have I missed here?

I can get the values if I hold rendering the form until the values are retrieved, but it does not look as good. I was hoping to disable the form fields whilst loading rather than hiding the whole form.

I hope that all makes sense?

[designspin]

I was able to overcome the problem by setting a ref on material-ui-form, then updating state on the form via the ref:

updateFormState() {
    this.form.current.setState((state) => {

      const fieldsArray = Object.keys(state.fields).map((prop) => {
        return {
          [prop]: {
            ...state.fields[prop],
            value: this.state[prop]
          }
        }
      });

      const fields = fieldsArray.reduce((obj, item) => {
        const key = Object.keys(item)[0];
        obj[key] = item[key];
        return obj;
      }, {});

      return {
        fields 
      }
    });
  }

Feels a bit wrong but works for now.

[galki]

youre not missing anything, material-ui-form was build to be self-contained and this feature is not available. it could be built though (looking for maintainers).

by the way i also started using firebase and as a result switched over to angular, as full form/validation support (the problem i wanted to solve with this repo) and much else comes standard with the framework and theres even some integration with firebase.

[designspin]

Thanks for the heads up on Angular, i'm too far in on my current project, but may give it a look in the future.