title: Creating Reusable Helper Functions in React.js
body: <p>I've been building React components for my latest app. I know I can reuse components which has helped keep my code DRY. </p>
  
  <p>I wanted to know if I could reuse functions. I know there has to be a way. </p>
  
  <p>Right now I have three components using a password validation function. </p>
  
  <pre><code>passwordValidation() {
    const length = this.state.password.length;
    if (length &gt; 7) return 'success';
    else if (length &gt; 4) return 'warning';
    else if (length &gt; 0) return 'error';
  }
  </code></pre>
  
  <p>I created a helper file - helpers.jsx and added: </p>
  
  <pre><code>export function passwordValidation() {
    const length = this.state.password.length;
    if (length &gt; 7) return 'success';
    else if (length &gt; 4) return 'warning';
    else if (length &gt; 0) return 'error';
  }
  </code></pre>
  
  <p>I then imported it into my component </p>
  
  <pre><code>import { passwordValidation } from '../helpers.jsx'
  </code></pre>
  
  <p>I keep getting the error "passwordValidation is not a function" when I try binding "this" in my constructor. </p>
  
  <p>If I invoke it in the input tag, I am getting "cannot read property state of undefined."</p>
  
  <p>Just trying to see where I am going wrong. Everything works if I define it in my class and add <code>this.passwordValidation = this.passwordValidation.bind(this)</code>.</p>
  
  <p>I'll go back to what I was doing if this isn't best practice, but I'm under the assumption that I should be able to import functions to make life easier and my code cleaner!</p>