How to add additional fields in React Query Builder?

Question

I am trying to achieve the following: When a user enters a specific value, then additional fields are displayed, there the user can enter the values, also the values from this fields should be displayed when exporting the query to json.

I am passing this custom editor to controlElements={{ valueEditor: CustomValueEditor }} on <QueryBuilder /> and it adds these fields when the required values are specified. But I cannot get X, Y and Z when exporting.

const CustomValueEditor = (props: ValueEditorProps) => {
    switch (props.value) {
        case "3d":
            return (
                <div className='demo-space-x'>
                    <ValueEditor {...props} />
                    <input placeholder='X' />
                    <input placeholder='Y' />
                    <input placeholder='Z' />
                </div>
            )
        case "2d":
            return (
                <div className='demo-space-x'>
                    <ValueEditor {...props} />
                    <input placeholder='X' />
                    <input placeholder='Y' />
                </div>
            )

        default:
            return <ValueEditor {...props} />
    }
}

Here is how I specify a field that takes the value 2d or 3d.

{
  name: 'system',
  label: 'system',
  inputType: 'string',
  operators: [equal, notEqual, less, lessOrEqual, greater, greaterOrEqual],
}

I know that in the JQuery JavaScript version there is a ValueGetter and a ValueSetter, which greatly simplifies this task. How can I achieve this result in React Query Builder?

Thank you.

Answer 1

Maintainer of react-querybuilder here. What I usually recommend in this situation is to store all values that you want to track on the value property itself. This can take the form of an array, object, comma-separated string, whatever works best for your use case.

If you do it this way, you'll need to make sure of two things:

1. The custom value editor component needs to handle the complex value property, so for example if your rule object looks like this...

{
  "field": "system",
  "operator": "=",
  "value": {
    "actualValue": "the actual value",
    "x": "x value",
    "y": "y value",
    "z": "z value"
  }
}

...then props.value passed to your custom value editor will be an object with actualValue, x, y, and z properties. Your value editor code should break them out and apply the properties to the appropriate controls.

2. You need to persist the entire object when updating the "value". When you call props.handleOnChange from your custom value editor, don't just call it with the value from the main control, call it with the full props.value object, with only the actualValue property updated (or x or y or whatever).

There are other ways to accomplish this, and these kinds of scenarios will get easier to manage in version 7 (coming soon...I hope!).