Component doesn't react with new data

The issue:

• The property fields in my application <QueryBuilder /> is using dynamic data that comes from an API call. But when the data is retrieved, the <QueryBuilder /> doesn’t render the new options in the fields dropdown.

Expected behavior:

• Having the component to re-render with the updated property.

Code sample:

// # Retrieving the data
componentWillMount() {
    getQueryConditions().then((result) => {

      const queryConditions = result.data
        .map(condition => ({
          name: condition.Name.replace(/\s+/g, ''),
          label: condition.Name,
        }));

      this.setState({ conditions: queryConditions });
    });
  }

 // # Rendering the component
 renderQueryBuilder = (conditions) => {
    if (!this.state.conditions.length) return <LinearProgress />;

    return (<QueryBuilder
      fields={conditions}
      onQueryChange={this.logQuery}
    />);
  };

For now I was able to circumvent this by interrupting the render completely until there’s data. But is the fact that the component doesn’t re-render a feature by design?

[pavanpodila]

@hellofantastic I think this could be a nice PR 😃

[jeroen-corsius]

I’m facing a similar issue: What I’m trying to accomplish is resetting the QueryBuilder to it’s initial state, by updating the query-property. The component doesn’t re-render on this unfortunately.