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.

Jake Boone · Accepted Answer · 2024-01-28 06:14:57Z

2

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:

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.

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!).

answered Jan 28, 2024 at 6:14

Jake Boone

1,5002 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Devid Mercer Over a year ago

Cool! Thank you for your work, the library is really great and I'll be waiting for updates. Thanks for the advice, I will try to implement it.

Collectives™ on Stack Overflow

How to add additional fields in React Query Builder?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related