React QueryBuilder integration

Hi, i’d like to integrate the querybuilder with react but i’d like to use my own components for the fields such as a Calendar for date pick and my own select component, i started yesterday with the Calendar but i don’t know where to set the value…

QueryBuilder.define("datepicker", function (options) {
      this.on("getRuleInput.filter", function (h, rule, name) {
        let {plugin} = rule.filter;
        if (plugin === "datepicker")
        ReactDOM.render(<Cx store={that.props.instance.store}>
          <DateField value:bind="$date"/>
        </Cx>, rule.$el[0].lastElementChild)
  });
}); 

[mistic100]

In your “getRuleInput” handler, set h.value = '';

[yrodrigez]

Thank you very much for your answer @mistic100 i am aware about the React thing you’re saying but it’s required to integrate this with react The problem that i’m having right now is that the QueryBuilder is not showing the rules when i set the value on it and is working with all rules but DateTime rules…

Idk if i need to call another function when changing the values of this rule or what i have to do, i’d like to know how you access the QueryBuilder values like if it is a Javascript object or a function that gets executed on the QueryBuilder('getRules')