questionAnswers state set to empty on rerender of <Winterfell />

[geekyme]

I'm wrapping Winterfell with a component which accepts a prop role and use it to fetch schema data dynamically.

It seems like whenever Winterfell is rerendered, due to my wrapper component rerendering (due to prop change), it's questionAnswers state is being set to {};

Sample code:

/**
*
* RoleForm
*
*/

import React, { PropTypes } from 'react';
// import styled from 'styled-components';
import Winterfell from 'winterfell';
import { getRoleFormSchema } from './schemas';
// import { FormattedMessage } from 'react-intl';
// import messages from './messages';

class RoleForm extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);

    this.state = {
      schema: getRoleFormSchema(props.role),
    };
  }

  shouldComponentUpdate() {
    // TODO the moment Winterfell rerenders, it causes questionAnswers state to disappear
    return false;
  }

  onFormRender() {

  }

  onFormUpdate() {
    // TODO check for branch changes and clear data from supplied schema
    // set a schema default value as undefined to clear it from the json payload on submit
    console.log('update', arguments);
  }

  onFormSwitchPanel() {

  }

  onFormSubmit(questionAnswers, target) {
    console.log('submit', arguments);
  }

  render() {
    return (
      <Winterfell
        disableSubmit
        schema={getRoleFormSchema()}
        onRender={this.onFormRender}
        onUpdate={this.onFormUpdate}
        onSwitchPanel={this.onFormSwitchPanel}
        onSubmit={this.onFormSubmit}
      />
    );
  }
}

RoleForm.propTypes = {
  role: PropTypes.object,
};

export default RoleForm;

Debugger:

The problem will happen the moment I remove that shouldComponentUpdate block above.

[andrewhathaway]

Hi @geekyme I believe this is by design, your parent component should be capturing the updates to answers and storing them, passing them back down. Otherwise there would be no "acceptable" way to flush out answers when you wanted to clear the form for example. Hope this helps!

[geekyme]

@andrewhathaway so how do i pass them back down?

[andrewhathaway]

@geekyme You can pass them down using the questionAnswers prop. Let me know how you get on, and we can close this issue (I'll reopen it now).

[geekyme]

I tried that, it doesn't seem to work when the form rerenders with the new props. The prepopulated questionAnswers doesn't fill up the form.

[andrewhathaway]

I'll investigate this at some point this weekend and have a look.

[andrewhathaway]

I've taken a quick look and I cannot reproduce this. Can you get me a test case please? Use this as a base: https://esnextb.in/?gist=07a8b8d62af04bb39693f8bae5344a8b

[JonathanLehner]

I got this problem as well. Just use shouldComponentUpdate() { // TODO the moment Winterfell rerenders, it causes questionAnswers state to disappear return false; } as above and then it is fine.