title: React: cant handle async function on event
body: <p>I got a problem when I try to trigger async function on event onClick at the second file in <code>h2</code>.
  I don't know where is the problem. I catch error with a type <code>TypeError: Cannot read property 'props' of undefined.</code> 
  Just take a look at the code.</p>
  
  <pre><code>import React from 'react'
  import {AngularIntroduce} from './../components/AngularIntroduce'
  import {connect} from 'react-redux'
  
  export default connect(
  state =&gt; ({
      angularData: state.angularData,
      angularReposList: state.angularReposList
  }),
  dispatch =&gt;  ({
      success: data =&gt; dispatch({
          type: 'angularData/FETCH__SUCCESS',
          data: data
      })
  
  })
  
  )(class angularRepoList extends React.Component {
  
  
  
  componentDidMount() {
  
      this.getAngularData()
  
  
  }
  
  async getAngularData() {
      try {
          const response = await             
  fetch('https://api.github.com/orgs/angular');
          const got = await response.json();
          await this.props.success(got)
          console.log(this.props.success)
      }
      catch (err) {
          throw console.log('fetch failed', err);
      }
  }
  
  async getAngularContributors() {
      try {
          const response = await 
  fetch('https://api.github.com/orgs/angular');
          const got = await response.json();
          await this.props.success(got)
          console.log(this.props.success)
      }
      catch (err) {
          throw console.log('fetch failed', err);
      }
  }
  
  
  
  
  
  render() {
  
  
      const angularContributors = this.getAngularContributors
      const angularData = this.props.angularData.data
  
      console.log(this.props.angularData)
      console.log(angularContributors)
  
  return (
   &lt;AngularIntroduce
       showContributors={angularContributors}
       angularBlog={angularData.blog}
       angularReposCount={angularData.public_repos}
       angularAvatar={angularData.avatar_url}/&gt;
  
  )
  }
  })
  </code></pre>
  
  <p>In pass this function in props to another dumb component. There is a   </p>
  
  <pre><code>import React from 'react'
  
   export const AngularIntroduce = (props) =&gt;{
  return (
      &lt;div className="container"&gt;
         &lt;header&gt;
             &lt;img src={props.angularAvatar} alt=""/&gt;
  &lt;h1&gt;Count of Repositories {props.angularReposCount}&lt;/h1&gt;
             &lt;h1&gt;&lt;a href={props.angularBlog}&gt;Look at their BLOG, there is 
  a lot of interesting materials!&lt;/a&gt;&lt;/h1&gt;
  &lt;h2 onClick={() =&gt; props.showContributors}&gt;Take a look at their contributors!&lt;/h2&gt;
  //Here i can change it to only props.showContributors that works but i got a error like that fetch failed 
  //TypeError: Cannot read property 'props' of undefined
             &lt;HandleClick/&gt;
         &lt;/header&gt;
      &lt;/div&gt;
  
  )
  }
  </code></pre>
  
  <p>Do u have some idea how to fetch that data on event?
  May I don't know something </p>