Notes on codes, projects and everything

Building Dynamic Form the hard way with React-Redux

Showing different sub-form based on user input

Remember there was a call to this.get_meta_widget?

So again, the advantage of using redux is that it always keep the latest state of the application. By using react-redux, it always re-render the components that receives a different set of properties.

Here is what get_meta_widget does

  get_meta_widget() {
    let result;

    switch (this.props.publication.type) {
      case "journal":
        result = (
          <Journal
            delegate_update={this.handle_update}
            definition={this.props.publication.meta || {}}
          />
        );
        break;
      case "book":
        result = (
          <Book
            delegate_update={this.handle_update}
            definition={this.props.publication.meta || {}}
          />
        );
        break;
      default:
        result = "";
    }
  get_meta_widget() {
    let result;

    switch (this.props.publication.type) {
      case "journal":
        result = (
          <Journal
            delegate_update={this.handle_update}
            definition={this.props.publication.meta || {}}
          />
        );
        break;
      case "book":
        result = (
          <Book
            delegate_update={this.handle_update}
            definition={this.props.publication.meta || {}}
          />
        );
        break;
      default:
        result = "";
    }

    return result;
  }
    return result;
  }

There you have it, there’s no need to notify the component when the user made changes through the select box (refer to the previous page). As the state changes, the component will re-render itself, and a different component is then inserted into the form automatically.

On the component reuse

So in the publication meta field (refer to the problem statement in the first page, there is another list of people, this time as editors. So we can now insert the Persons component, very similar to what we did with authors previously (in the previous page).

        <Persons
          delegate_update={this.handle_update}
          field="editors"
          legend="Editors"
          persons={this.props.definition.editors || [{}]}
        />

and the respective handle_update

    handle_update(_, changes) {
      return this.props.delegate_update(false, {
        meta: Object.assign({}, this.props.definition, changes)
      });
    }

Which is very similar to what we did in other components. It is just the matter of generating a new entity via Object.assign calls, integrate the changes to the parent form through delegate_update property method. Then the child component can generate the new state without having to know what the parent component looks like, then dispatch the new revision to redux.

The complete code can be found at my github repository. Feel free to leave me a comment here or an issue on github so we can discuss further into this.

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.

Click to change color scheme