This video is available to students only

Custom value editors

How to provide your own value editor in order to take full control of the rule manager

Now we'll customize the ValueEditor component of our query builder and tailor it to the different data types.

Using the default ValueEditor#

Create a React component in a file called ValueEditor.tsx and use that component as your custom ValueEditor. For now, the component should simply return null if the operator is null or notNull; otherwise it should return the default ValueEditor component from react-querybuilder.

If you like, check out the react-querybuilder source code to see what the default ValueEditor looks like.


Start a new discussion. All notification go to the author.