title: React-Bootstrap DropDown Button pullRight/Left
body: <p>I am using react bootstrap dropdown menu <a href="https://react-bootstrap.github.io/components.html#btn-dropdowns" rel="noreferrer">https://react-bootstrap.github.io/components.html#btn-dropdowns</a>. <code>pullRight</code> and <code>pullLeft</code> allows us to align the position of the menu . </p>
  
  <p>I do not know the width of the menu items initially. I need to calculate on run time and conditionally align the dropdown items (pass the props <code>pullLeft</code>/<code>pullRight</code> to <code>DropdownButton</code>) . The children (<code>MenuItem</code>) are visible none when the drop down loads, only on button click I get the height. </p>
  
  <p>My question is that, do I need to calculate the height on click and re-render the entire <code>DropdownButton</code> component? Any better way to pass the prop to <code>DropdownButton</code> component without re rendering?</p>
  
  <pre><code>      &lt;DropdownButton
            buttonClassName={buttonAttrs.className}
            pullLeft
            onClick={this.callToggle}
            bsStyle={(metadata.displayStyle === 'button' ? 'button' : 'link' )}
            noCaret
            title={title}
            key={"0"}
            id={"test"}
        &gt;
            {this.renderChildren().map((child, index) =&gt; {
                return (&lt;MenuItem eventKey={index}&gt;{child}&lt;/MenuItem&gt;)
            })}
       &lt;/DropdownButton&gt; : &lt;button {...buttonAttrs} ref="button"&gt;
  </code></pre>