title: React how to handle resize of top border in a component
body: <p>Recently I created my tabbed drawer component using React, I would like to add another feature to make the drawer resizable dragging the top border up or down.</p>
  
  <p>I understand that I can set the height in the component state, create a function to handle the event and when the this.state.height is change React will render again the component to the right height.</p>
  
  <p>I understand that I can handle this with JQuery using the resizable function but if possible I would avoid to interact directly with the DOM since this is what React aims to do.</p>
  
  <p>I started to code in JS few weeks ago and I am missing the points below:</p>
  
  <ul>
  <li><p>how can I handle or create an event in the top border of my div container id="drawer"?</p></li>
  <li><p>how can I make this event return a value that indicates where the mouse stopped in term of height to get a new value to call setStatus and render my component with the right height one more time?</p></li>
  </ul>
  
  <p>Below my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>define(function (require) {
  
      var React = require('react');
      var DrawerButton = require('./DrawerButton');
      require('./TabbedDrawer.less');
  
      class TabbedDrawer extends React.Component {
          constructor(props) {
              super(props);
  
              this.state = {
                  drawerOpened: false,
                  buttonSelected: null,
                  drawerHeight: 0
              }
              this.openDrawer = this.openDrawer.bind(this);
              this.renderMyLabels = this.renderMyLabels.bind(this);
              this.resizeDrawer = this.resizeDrawer.bind(this);
          }
  
          renderMyLabels() {
              var renderedLabels = this.props.labels.map(function(label, _key) {
                  return (
                      &lt;DrawerButton 
                          functionDrawer={this.openDrawer}
                          labelKey={_key}
                          buttonSelected={this.state.buttonSelected}
                          drawerOpened={this.state.drawerOpened}&gt;
                          {label}
                      &lt;/DrawerButton&gt;
                  );
              }, this);
              return renderedLabels;
          }
  
          openDrawer(buttonClicked) {
              if(this.state.drawerOpened &amp;&amp; (buttonClicked == this.state.buttonSelected)) {
                  this.setState({buttonSelected: null,
                                 drawerOpened: !this.state.drawerOpened});
              } else if(this.state.drawerOpened &amp;&amp; (buttonClicked != this.state.buttonSelected))  {
                  this.setState({buttonSelected: buttonClicked});
              } else {
                  this.setState({buttonSelected: buttonClicked,
                                 drawerOpened: !this.state.drawerOpened});
              }
          }
  
          render() {
              const ElementToRender = (this.state.buttonSelected !== null) ? this.props.children[this.state.buttonSelected] : null;
              const myElement = (ElementToRender !== null) ? &lt;ElementToRender /&gt; : "";
              const drawerStyle = this.state.drawerOpened ? {display: 'block'} : {display: 'none'};
              const tabStyle = this.state.drawerOpened ? {bottom: '250px'} : {bottom: '0px'};
              return (
                  &lt;div id="testDrawer"&gt;
                      &lt;span id="tabber" style={tabStyle}&gt;
                          {this.renderMyLabels()}
                      &lt;/span&gt;
                      &lt;div id="drawer" style={drawerStyle}&gt;
                          &lt;div className="topLine" &gt;
                          &lt;/div&gt;
                          {myElement}
                      &lt;/div&gt;
                  &lt;/div&gt;
              );
          }
      }
      return TabbedDrawer;
  });
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>@import "./../../../../style/less/components/colors";
  
  @-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
  }
  
  #geppettoDrawer {
  display: inline-block;
  }
  
  #tabber {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    border-bottom: 0.5px solid rgb(252, 99, 32);
    width: 100%;
    display: block;
    margin-top: 0px;
    text-decoration: none;
    left: 0;
    bottom: 0;
    position: absolute;
    background: transparent;
  }
  
  #tabButton {
    color: @primary_color;
      margin: 0 auto;
      margin-bottom: 26px;
    position: relative;
    border-color: rgb(252, 99, 32);
    border: 0.5px;
    border-bottom: 0px;
      border-style: solid;
      box-shadow: none;
      text-shadow: none;
      width: 140px;
      height: 35px;
    padding: 7px 20px;
    text-align: center;
    display: inline-block;
    cursor: pointer!important;
    background: rgba(50, 50, 53, 0.8);
  }
  
  #drawer {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    height: 250px;
    width: 100%;
    background-color: black;
    color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: none;
    transition: opacity 1s ease-out;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    background: rgba(50, 50, 53, 0.8);
  }
  </code></pre>