React function is not defined

Question

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?

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 (
      <div style={styles.wrapper}>
        <Chip
          onTouchTap={handleTouchTap}
          style={styles.chip} >
          <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
          Login
        </Chip>
        <Chip
          style={styles.chip} >
          <Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} />
          {this.username}
        </Chip>
      </div>  
    );
  }
}

Answer 1

In most cases, when you want to render something that might change, you want to add it to the state. That way when you call setState the component knows it needs to rerender and show the changes.

Here I added the functions as component methods, so that you can call this.setState on the result. Ideally you would probably do this with redux and use actions but this will work as a self contained component.

class Chips extends React.Component {
  handleTouchTap = () => {
    console.log('CHIP selected');
    this.authorize();
  }

  handleAccounts = (response) => {
    var username = response.result.username;
    this.setState({
      username
    });
  }

  authorize = (event) => {
    var useImmidiate = event ? false : true;
    var authData = {
      client_id: CLIENT_ID,
      scope: SCOPES,
      immidiate: useImmidiate
    };
    gapi.auth.authorize(authData, (response) => {
      gapi.client.load('analytics', 'v3').then(() => {
        console.log(response);
        gapi.client.analytics.management.accounts.list()
          .then(this.handleAccounts);
      });
    });
  }

  render() {
    return (
      <div style={styles.wrapper}>
        <Chip
          onTouchTap={this.handleTouchTap}
          style={styles.chip}>
          <Avatar icon={<FontIcon className="material-icons">perm_identity</FontIcon>} />
          Login
        </Chip>
        <Chip
          style={styles.chip} >
          <Avatar icon={<FontIcon className="material-icons">account_circle</FontIcon>} />
          {this.state.username}
        </Chip>
      </div>  
    );
  }
}