How to convert below function in functional component ?

Question

updateRule(args) {
        let predicate = this.qbObj.getPredicate(args.rule);
        if (isNullOrUndefined(predicate)) {
            this.gridObj.query = new Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status']);
        }
        else {
            this.gridObj.query = new Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status'])
                .where(predicate);
        }
        this.gridObj.refresh();
    }

Gayathri KarunaiAnandam · Answer

Hi Prasad, 

We have prepared a sample based on your requirement for querybuilder with data grid in functional component. Please check the below code snippet. 

Code: 




function updateRule(args) { 
    let predicate = this.getPredicate(args.rule); 
    if (isNullOrUndefined(predicate)) { 
      gridObj.current.query = new Query().select([ 
        "OrderID", 
        "CustomerID", 
        "EmployeeID" 
      ]); 
    } else { 
      gridObj.current.query = new Query() 
        .select(["OrderID", "CustomerID", "EmployeeID"]) 
        .where(predicate); 
    } 
    gridObj.current.refresh(); 
  } 
 

For your convenience, please check the below sample link. 

Sample: https://codesandbox.io/s/react-hooks-counter-demo-forked-jur6g?file=/src/Forms/QueryBuilder.js 

Please get back to us, if you need further assistance. 

Regards, 
Gayathri K