title: What about propTypes inside body of functional components?
body: <p>The standard way of specifying propTypes for a functional component is after the function body:</p>
  
  <pre><code>const One = ({text}) =&gt; {
      return &lt;div&gt;One says {text}&lt;/div&gt;
  };
  
  One.propTypes = {
      text: PropTypes.string.isRequired
  };
  
  export default One;
  </code></pre>
  
  <p>I've seen somewhere an alterative way, with the <code>propTypes</code> attribute written inside the function body:</p>
  
  <pre><code>const One = ({text}) =&gt; {
      One.propTypes = {
         text: PropTypes.string.isRequired
      };
  
      return &lt;div&gt;One says {text}&lt;/div&gt;
  };
  
  export default One;
  </code></pre>
  
  <p>I actually tend to prefer the second one, especially if the component has many lines, so that the propTypes (part of the contract) is visually close to the declaration.
  But this way is almost nowhere mentioned, and it makes me wonder:</p>
  
  <p>Is that valid ES6 ( to assign properties to an arrow function inside
  the body)?  I'd though it wasn't, because the assigment of the
  function to the variable <code>One</code> has not taken place at that point...
  but it seems to work  - example below.</p>
  
  <p>Does it have any shortcoming?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const mifunc = (x,y) =&gt; {
   mifunc.prop1 = 'hi'; 
   return x+y;
  }
  
  console.log(mifunc(2,3));
  console.log(mifunc.prop1);</code></pre>
  </div>
  </div>
  </p>