Initialising datatable with webix_debug fails within a React component

dpelayo · May 16, 2017, 8:08am

I’m initialising a datatable view within my React component when componentDidMount.

The thing is when I import as dependency webix.js, it works perfectly. However, if I’m using webix_debug, it throws an exception.

The code snippet example is the following: Code Snippet

I just pasted there the code because I couldn’t find proper documentation on how to markup and style code snippets within the “New Discussion” editor.

Any help?

maksim · May 22, 2017, 3:38pm

Debug version of webix.js do some extra checks to code, to catch errors in the UI configuration.

I don’t see any suspicious code in the shared snippet though. Can you provide the text of the error message please?

You have the fixed id for datatable. Please beware that if you are using the same component multiple times, you will have a warning message as the same id can’t be used by multiple components. Also, be sure to destroy component in the componentWillUnmount method.

github.com

webix-hub/react-demo/blob/master/src/Webix.js#L27

    
      
          setWebixData(data){
            const ui = this.ui;
            if (ui.setValues)
              ui.setValues(data);
            else if (ui.parse)
              ui.parse(data)
            else if (ui.setValue)
              ui.setValue(data); 
          }
          
          
componentWillUnmount(){
            this.ui.destructor();
            this.ui = null;
          }
          
          
componentWillUpdate(props){
            if (props.data)
              this.setWebixData(props.data);
            if (props.select)
              this.select(props.select);
          }

dpelayo · May 25, 2017, 10:06am

It’s below the code snippet:

webix_debug.js?2dc0:4604 Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
  at _appendDom (eval at  (app8d2ff6d….js:9837), :4604:8)
  at Object.webix.ui (eval at  (app8d2ff6d….js:9837), :4573:5)
  at o.pager_setter (eval at  (app8d2ff6d….js:9981), :569:233)
  at o.D (eval at  (app8d2ff6d….js:9981), :107:200)
  at o.C (eval at  (app8d2ff6d….js:9981), :107:257)
  at o.e (eval at  (app8d2ff6d….js:9981), :108:58)
  at o (eval at  (app8d2ff6d….js:9981), :13:304)
  at new i (eval at  (app8d2ff6d….js:9981), :11:260)
  at Function.e.A (eval at  (app8d2ff6d….js:9981), :201:296)
  at o.kc (eval at  (app8d2ff6d….js:9981), :230:200)

maksim · May 29, 2017, 10:35am

According to the stack trace, the container property doesn’t point to the valid HTML node.

Probably you need to use

ReactDOM.findDOMNode(this.refs.table)

instead of

this.refs.table