title: React sharing method across components
body: <p>I have a component that looks like this so far:</p>
  
  <pre><code>import React from 'react';
  
  // Import images
  import logo from '../images/logo-small.png';
  
  class LoginForm extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              email: '',
              password: '',
          };
  
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(e) {
          const target = e.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
  
          this.setState({
              [name]: value
          });
      }
  </code></pre>
  
  <p>I'm going to be reusing the same <code>handleChange(e)</code> method across multiple components across multiple files on my app. Is there a way I can separate out this method instead of having to rewrite it each time? </p>
  
  <p>Would I put <code>handleChange(e)</code> into a file names <code>utils.js</code> and import that file each time I need to use it? If so, how do I make sure that <code>this.setState</code> works properly?</p>
  
  <p>I have some rough ideas on how to go about this (such as the one above), but I want to take the best approach to this. Thanks!</p>