title: How can I use 'this' in defaultProps React.Component class syntax?
body: <p>In the past I was able to set a default prop that used <code>this</code> like so...</p>
  
  <pre><code>let MyButton = React.createClass({
      getDefaultProps() {
          return {
              buttonRef: (ref) =&gt; this.button = ref
          };
      },
  </code></pre>
  
  <p>But now that I'm using JS classes <code>MyButton</code> looks like this...</p>
  
  <pre><code>class MyButton extends React.Component {
      static defaultProps = {
          buttonRef: (ref) =&gt; this.button = ref
      };
  </code></pre>
  
  <p>And I get an error saying that <code>this</code> is undefined.</p>
  
  <p>What do I need to do to be able to set default props that use <code>this</code>?</p>
  
  <p>EDIT: Add some context</p>
  
  <p>Setting a default <code>buttonRef</code> prop allowed me to use the ref in the <code>MyButton</code> component but also always be able to pass in a custom ref if a parent component needs to access the <code>MyButton</code> DOM node.</p>
  
  <pre><code>class MyButton extends React.Component {
      static defaultProps = {
          buttonRef: (ref) =&gt; this.button = ref
      };
  
      componentDidMount() {
          Ladda.bind(this.button);
      }
  
      render() {
          return (
              &lt;button
                  ref={(ref) =&gt; this.button = this.props.buttonRef(ref)}
                  onClick={this.props.handleClick}
              &gt;
                  {this.props.buttonText}
              &lt;/button&gt;
          );
      }
  }
  </code></pre>
  
  <p>So then my button can always get hooked in to Ladda: <code>Ladda.bind(this.button)</code></p>
  
  <p>And if I need to access that button's DOM node in a parent component I can do so by passing in <code>buttonRef</code> as a prop like...</p>
  
  <pre><code>class MouseOverButton extends React.Component {
      componentDidMount() {
          this.mouseEnterButton.addEventListener("mouseover", doSomething(event));
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;MyButton
                      buttonRef={(ref) =&gt; this.mouseEnterButton = ref}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>EDIT: Apparently my simplified example doesn't illustrate the point well enough so I can come up with a more practical example or y'all can just answer the original question: What do I need to do to be able to use <code>this</code> in my <code>defaultProps</code>?  Can I no longer do that using JS class syntax?</p>
  
  <p>Where this convention of having a defaultProp for a specific element's ref has been useful is when using a HOC that hooks a nested component into some 3rd party API.  I have an <code>AddressSearch</code> HOC that takes a node via a function passed to the wrapped component. Then it uses that node to hook it up with Google's Places API. </p>
  
  <p>So I've got my <code>addAddressSearch(component)</code> function from my HOC.  It adds the functions needed to hook up the Google places API.  But for Google's API to work I need to know what DOM node I'm working with. So I pass my <code>Input</code> component an <code>inputRef</code> that gives my <code>AddressSearchInput</code> access to the appropriate node.  </p>
  
  <pre><code>class AddressSearchInput extends React.Component {
      static defaultProps = {
          inputRef: (ref) =&gt; this.addressSearchInput = ref
      };
  
      componentDidMount() {
          let node = this.addressSearchInput;
  
          this.props.mountAddressSearch(node);
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Input
                      inputAttributes={inputAttributes}
                      inputRef={(ref) =&gt; this.addressSearchInput = this.props.inputRef(ref)}
                      labelText={&lt;span&gt;Event address or venue name&lt;/span&gt;}
                      labelClassName={labelClassName}
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  AddressSearchInput = addAddressSearch(AddressSearchInput);
  
  module.exports = AddressSearchInput;
  
  // Here's the Input component if that helps complete the picture here
  class Input extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Label&gt;{this.props.labelText}&lt;/Label&gt;
                  &lt;HelperText text={this.props.inputHelperText} /&gt;
                  &lt;input
                      {...this.props.inputAttributes}
                      ref={this.props.inputRef}
                  &gt;&lt;/input&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>So now when I want to use my <code>AddressSearchInput</code> in a parent component that needs to add an eventListener to the relevant node I can just pass <code>AddressSearchInput</code> an <code>inputRef</code> prop. </p>
  
  <pre><code>class VenueStreetAddress extends React.Component {
      componentDidMount() {
          let node = this.venueStreetAddressInput;
          this.props.mountValidateOnBlur(node, venueValidationsArray);
      },
      render() {
          return (
              &lt;div&gt;
                  &lt;AddressSearchInput
                      inputRef={(ref) =&gt; this.venueStreetAddressInput = ref}
                      hasError={this.props.hasError}
                  /&gt;
                  {this.props.errorMessageComponent}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>And I can use <code>AddressSearchInput</code> all over the place and it doesn't break anything.</p>
  
  <pre><code>class UserStreetAddress extends React.Component {
      componentDidMount() {
          let node = this.userStreetAddressInput;
          this.props.mountValidateOnBlur(node, userValidationsArray);
      },
      render() {
          return (
              &lt;div&gt;
                  &lt;AddressSearchInput
                      inputRef={(ref) =&gt; this.userStreetAddressInput = ref}
                      hasError={this.props.hasError}
                  /&gt;
                  {this.props.errorMessageComponent}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Maybe this way is convoluted and wrong but I don't have the time to figure out another way to do it on my own.  So either point me to a tutorial(s) on the best way to hook into 3rd party APIs and add dynamic form validation without using refs or answer my original question which is...</p>
  
  <p><strong>What do I need to do to be able to use <code>this</code> in my <code>defaultProps</code>?  Can I no longer do that using JS class syntax?</strong></p>
  
  <p>EDIT: In attempting to explain my use case I had the idea to make my defaultProps look like this...</p>
  
  <pre><code>static defaultProps = {
      inputRef: (ref) =&gt; ref
  };
  </code></pre>
  
  <p>which seems to be working without error.</p>
  
  <p>In any case, the original question still stands. <strong>What do I need to do to be able to use <code>this</code> in my <code>defaultProps</code>?  Can I no longer do that using JS class syntax?</strong></p>