title: React function is not defined
body: <p>I am trying to create a react component with imported data from Google API. I can see the code is working in the console.log but when I try to use that code in React render method, I am not getting anything. When I move my function inside the class it comes up as the function not defined. I cannot understand why?</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-html lang-html prettyprint-override"><code>function handleTouchTap() {
    console.log('CHIP selected');
    authorize();
  }
  
  function handleAccounts(response) {
    console.log(response.result.username);
    var username = response.result.username
    console.log(username);
  }
  
  function authorize(event) {
    var useImmidiate = event ? false : true;
    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immidiate: useImmidiate
    };
    gapi.auth.authorize(authData, function (response) {
      gapi.client.load('analytics', 'v3').then(function () {
        console.log(response);
        gapi.client.analytics.management.accounts.list().then(handleAccounts);
      });
    });
  }
  
  class Chips extends React.Component {
    render() {
      return (
        &lt;div style={styles.wrapper}&gt;
          &lt;Chip
            onTouchTap={handleTouchTap}
            style={styles.chip} &gt;
            &lt;Avatar icon={&lt;FontIcon className="material-icons"&gt;perm_identity&lt;/FontIcon&gt;} /&gt;
            Login
          &lt;/Chip&gt;
          &lt;Chip
            style={styles.chip} &gt;
            &lt;Avatar icon={&lt;FontIcon className="material-icons"&gt;account_circle&lt;/FontIcon&gt;} /&gt;
            {this.username}
          &lt;/Chip&gt;
        &lt;/div&gt;  
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>