title: Uncaught (in promise) ReferenceError: <function> is not defined
body: <p>I'm really new to ReactJs and currently struggling to create an onClick event, that will take the href value of itself and pass it to a function called 'action'. </p>
  
  <p>The action function should then prevent the default browser behavior, perform a GET request to the passed in URL, and show an alert dialog containing the response and status.</p>
  
  <p>However I am stuck trying to call my function from the onClick event with the following error:</p>
  
  <blockquote>
    <p>Uncaught (in promise) ReferenceError: action is not defined</p>
  </blockquote>
  
  <pre><code>var Content = React.createClass({
      getInitialState: function() {
          return {
              teams: []
          }
      },
  
      componentDidMount: function() {
          const makeRequest = () =&gt; axios.get("http://localhost:5000/api/teams").then(({ data }) =&gt; this.setState({ teams: data }));
  
          this.serverRequest = makeRequest();
  
          this.poll = setInterval(() =&gt; {
              this.serverRequest = makeRequest();
          }, 10000)
      },
  
      componentWillUnmount: function() {
          this.serverRequest.abort();
  
          clearInterval(this.poll)
      },
  
      action: function(e) {
          e.preventDefault();
  
          $.get(e.href, function(res, status) {
              alert("Response: " + res + "\nStatus: " + status);
          });
      },
  
      render: function() {
          const { teams } = this.state;
  
          return (
              &lt;div className="list-group"&gt;
                  { teams.map(function(team) {
                      return ([
                          &lt;a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ action }&gt;Click Me&lt;/a&gt;
                      ]);
                  })}
              &lt;/div&gt;
          )
      }
  });
  
  ReactDOM.render(&lt;Content /&gt;, document.getElementById('content'));
  </code></pre>