React Drag and Resize Component

DragAndResize.jsx

import React from "react"
import { DragDropContainer } from 'react-drag-drop-container';
import { Resizable, ResizableBox } from 'react-resizable';

export default class DragAndResize extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      noDragging:false,
      clipperWidth:100,
      maxWidth:-1,
    };
    this.startX = null;
  }
  componentDidMount() {}
  componentWillReceiveProps(np) {}
  
  onDragStart(dragData){
    console.log("onDragStart");
    this.setState({noDragging:false})
  }
  onDrag(dragData, currentTarget, x, y){
    if(this.startX === null){
      this.startX = x;
    }
    //this.refs.dc => clipper Box
    //this.refs.dc.parentElement => ResizableBox
    //this.refs.dc.parentElement.parentElement => DragDropContainer
    //this.refs.dc.parentElement.parentElement.parentElement => True Parent from other component
    var parentComponent = this.refs.dc.parentElement.parentElement.parentElement;
    var dragContainer = this.refs.dc.parentElement.parentElement;
    
    var clientWidth= parentComponent.clientWidth;//860;//672
    var maxLeft = clientWidth-this.refs.dc.parentElement.clientWidth;
    var offsetLeft = this.refs.dc.parentElement.parentElement.offsetLeft;
    //console.log("onDrag",dragData,currentTarget,x,y);
    //console.log("this.refs.dc.parentElement.offsetLeft",this.refs.dc.parentElement.offsetLeft,this.refs.dc.parentElement.clientWidth);
    //console.log("this.refs.dc.parentElement.parentElement",this.refs.dc.parentElement.parentElement.clientWidth);
    //console.log("dragContainer.style.left",dragContainer.style.left,offsetLeft);
    var maxWidth = clientWidth-offsetLeft;
    this.setState({maxWidth});
    if(offsetLeft < 0){
      if(this.startX - x > 0){ //moving <- left so stop it, else continue so we don't get stuck
        this.setState({noDragging:true})
      }
    }
    if(offsetLeft > maxLeft){
      if(this.startX - x < 0){ //moving -> right so stop it, else continue so we don't get stuck
        this.setState({noDragging:true})
      }
    }
  }
  onDragEnd(dragData, currentTarget, x, y){
    console.log("onDragEnd");
    this.startX = null;
    this.setState({noDragging:false})
  }
  onResize(event, {element, size}) {
    this.setState({clipperWidth: size.width});
  }
  onResizeStart(event, data){
    console.log("onResizeStart");
    this.setState({noDragging:true});
  }
  onResizeStop(event,data){
    console.log("onResizeStop");
    this.setState({noDragging:false});
  }
  
  render() {
    let maxWidth = this.state.maxWidth;
    if(maxWidth == -1 && this.refs.dc && this.refs.dc.parentElement.parentElement.parentElement.clientWidth){
      maxWidth = this.refs.dc.parentElement.parentElement.parentElement.clientWidth;
    }
    return (
      <DragDropContainer xOnly={true} noDragging={this.state.noDragging} 
        onDrag={this.onDrag.bind(this)}
        onDragStart={this.onDragStart.bind(this)}
        onDragEnd={this.onDragEnd.bind(this)}
        >
          <ResizableBox width={this.state.clipperWidth} height={30} axis={"x"} 
            maxConstraints={[maxWidth, 30]}
            onResize={this.onResize.bind(this)}
            onResizeStart={this.onResizeStart.bind(this)}
            onResizeStop={this.onResizeStop.bind(this)}
            >
            <div ref="dc" id={this.props.id?this.props.id:""} className={"tl-drag-and-resize "+(this.props.className?this.props.className:"")}
              style={{width:this.state.clipperWidth+"px"}}>
            </div>
          </ResizableBox>
      </DragDropContainer>
      
    )
  }
}
module.exports = DragAndResize

style.css

.tl-drag-and-resize{
  background: rgba(255,0,0,0.3);
  height: 30px;
  width: 100%;
}

/***** https://github.com/STRML/react-resizable ******/
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 100%;
  bottom: 0;
  right: 0;
  border-right: 4px solid #F00;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: e-resize;
}