How to add multiple rules with click of Add Rule button?

[kellywang1234]

Hi,
Do you know how to add two or multiple rows at a time when we click the Add Rule button?
It would be really helpful if there is an example! Thank you very much!
This is sandbox link if you click AddRule (Number), Weight and Height rows should display at the same time https://codesandbox.io/s/react-query-builder-additional-rule-button-for-different-fields-and-operators-nspxw3?file=/src/App.tsx:1019-1026

[jakeboone02]

This is definitely possible, but it's a little tricky up through the current release, v6. If you can wait for v7, this will be a much easier question to answer, but I'm not exactly sure when v7 final will be released.

(Feel free to use the latest alpha, 7.0.0-alpha.2, if you feel adventurous (migration instructions here). Honestly it's probably safe to use in production, and I'm not planning on making any big changes before the final release. I'm happy to help you migrate to v7 and use the new features that make your requirement easier to implement, but if you need something "official", read on.)

If you only need to deal with one level of rules, i.e. no sub-groups, then it's probably easiest to use the techniques described in the External Controls page.

If you need to handle sub-groups properly, you'll need to move the state management of the query outside the component. In the addRuleAction component, call whatever update method is appropriate (e.g. dispatch(actionCreator(...)) for Redux) instead of props.handleOnClick. Pass the path and whatever context you need to utilize the add method.

In #296 I linked to this CodeSandbox which does something similar. Hopefully that gives you a starting point at least.

[kuljeet2604]

can we modify it to add independent rule group instead of nested?

[jakeboone02]

You might want to try the showCloneButtons prop (documentation). That will display a button to duplicate the current group (or rule) as a sibling object, not nested.