title: ReactGridLayout: ReactGridLayout.children[0].x must be a number
body: <p>im setting up list add for grid that i removed and then store it to the list data, its works before but when im trying to add right now but got this error.
  ReactGridLayout: ReactGridLayout.children[0].x must be a number! </p>
  
  <pre><code> listAdd(x){
  
          let addItems = [...this.state.addItems];
          let items = [...this.state.items];
  
          items.push(x)
          addItems.splice(addItems.indexOf(x),1)
          console.log(items, 'uitems');
          console.log(addItems, 'items')
          this.setState({
              items: items,
              addItems: addItems
          })
      }
  </code></pre>
  
  <pre><code>getInput(key){
          //let ls = {};
          let value = localStorage.getItem("layoutsJR") || {};
          //ls = JSON.parse(localStorage.getItem("layoutsJR")) || {};
          try{
              //parse localstorage string dan set state
              value = JSON.parse(value)
              this.setState({
              [key]: value
              })
          }catch(e){
              //handle empty string
              this.setState({
              [key]: value
              })
          }
          //console.log(value[key], "get inputan move")
          return value[key]
  
  
          // return ls[key];
      }
  
      updateInput(key, value){
          this.setState({
              [key] : value
          })
  
          localStorage.setItem(key, JSON.stringify({[key]: value}))
      }
  </code></pre>
  
  <pre><code>onRemoveItem(i){
  
          let addItems = [...this.state.addItems];
          let items = [...this.state.items];
          addItems.push(items[i]);
          items.splice(i, 1);
          this.setState({
              addItems : addItems,
              items :items
          })
      }
  </code></pre>
  
  <pre><code> class AddRemoveLayout extends React.Component{
      // static get defaultProps() {
      //     return {
      //     className: "layout",
      //     cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
      //     rowHeight: 100,
      //     onLayoutChange: function(){}
      //     }
      // };
  
      constructor(props){
          super(props);
  
          this.state={
              itemsDefault :[0, 1, 2, 3, 4, 5].map(function(i){
                  return{
                      i: i.toString(),
                      x: i*2,
                      y: 2,
                      w: 3,
                      h: 3
                  };
              }),
              items: [0, 1, 2, 3, 4, 5].map(function(i){
                  return{
                      i: i.toString(),
                      x: i*2,
                      y: 2,
                      w: 3,
                      h: 3
                  };
              }),
              addItems:[],
              fullScreen: true,
              tempSisa: null,
              addItemsSisa: [],
              quantity:"",
              showWidget: false,
              isChecked: true,
              product: '',
              layouts: JSON.parse(JSON.stringify(this.getInput("layoutsJR")|| []))
  
          };
  </code></pre>
  
  <pre><code>render(){
          let items = this.state.items;
          let addItems = this.state.addItems;
  
          return(
              &lt;div&gt;
                  {this.state.fullScreen ? 
                      &lt;div class="buttonMenu"&gt;
  
  
                  &lt;Dropdown class="dropdownList"&gt;
                      &lt;Dropdown.Toggle variant="success" id="dropdown-basic"&gt;
                          List Add
                      &lt;/Dropdown.Toggle&gt;
  
                      &lt;Dropdown.Menu&gt;
                        {addItems.map((index) =&gt;{
                            return &lt;Dropdown.Item key={index} onClick={this.listAdd.bind(this, index)}&gt;{index.i}&lt;/Dropdown.Item&gt;
                        })}
                      &lt;/Dropdown.Menu&gt;
                  &lt;/Dropdown&gt;&lt;/div&gt; : &lt;div&gt;&lt;/div&gt;}
  
                  &lt;ResponsiveReactGridLayout
  
                      className="layout"
                      cols={{lg: 12, md:10, sm:6, xs:4, xxs:2}}
                      rowHeight={30}
                      layouts={this.state.layouts} 
                      onLayoutChange={(layout, layouts)=&gt;this.onLayoutChange(layout, layouts)} 
                      onBreakpointChange={this.onBreakpointChange} 
  
                  &gt;{_.map(this.state.items, (el, index) =&gt; {return this.createElement(el, index)})
                  /*this.state.items.map((el, index) =&gt; {
                      return this.createElement(el, index)
                  })*/
                  }
                  &lt;/ResponsiveReactGridLayout&gt;
              &lt;/div&gt;
          );
      }
  }
  
  </code></pre>
  
  <p>its works before that i adding table in my grid layout but then i got this error ReactGridLayout: ReactGridLayout.children[0].x must be a number!</p>