title: ReactJS Call function inside a function error
body: <p>I have a project in <em>ReactJS</em>.</p>
  <p>In <strong>onTaskHero</strong> function I'am trying to call <strong>setTheKick</strong> function but it show me an <strong>error</strong>.</p>
  <p><strong>TypeError: Cannot read properties of undefined (reading 'setTheKick')</strong></p>
  <p>This is because the function I want to call is inside the <em>Axios Service</em>?</p>
  <p>What is the solution? Thank you very much!</p>
  <pre><code>import axiosHero from 'axios';
  import React from 'react';
  import HeadHero from './headhero'; 
  
  class CovidHero extends React.Component{
  
  constructor( props ){
      super(props);
      this.state = {
          requestOptions : {
              method: 'GET',
              url: 'https://covid-193.p.rapidapi.com/statistics',
              headers:{
                  &quot;x-rapidapi-host&quot;:
                  &quot;covid-193.p.rapidapi.com&quot;,
                  &quot;x-rapidapi-key&quot;:&quot;b8b679d0d8msh05c65a5a3cfdb34p1337b3jsnc1c598d825a0&quot;
              }
          }
      };
  
      this.onTaskHero = this.onTaskHero.bind(this);
      this.setTheKick = this.setTheKick.bind(this);
  
  }
  
  setTheKick(e, t, a, n) {
      let c = document.createElement(&quot;div&quot;);
      c.className += t;
      let d = document.createElement(&quot;span&quot;);
      d.appendChild(document.createTextNode(a));
      c.appendChild(d);
      let i = document.createElement(&quot;span&quot;);
      i.appendChild(document.createTextNode(n));
      c.appendChild(i);
      e.appendChild(c);
  }
  
  onTaskHero( letter__init ) {
  
      axiosHero.request(this.state.requestOptions).then(function (e) {
          const datacenter = e.data.response;
          let home = document.getElementsByClassName(&quot;treeBody&quot;)[0];
          for( let databox in datacenter ){
              if( datacenter[databox].country.charAt(0) === letter__init ){
                  
                  home.innerHTML = '';
  
                  let s = document.createElement(&quot;div&quot;);
                  s.className += 'box';
                  let r = document.createElement(&quot;h2&quot;);
  
                  r.appendChild( document.createTextNode( datacenter[databox].country ) );
                  s.appendChild(r);
                  this.setTheKick(s, &quot;total&quot;, &quot;Total cases:&quot;, datacenter[databox].cases.total);
                  this.setTheKick(s, &quot;new&quot;, &quot;New cases:&quot;, datacenter[databox].cases.new);
                  this.setTheKick(s, &quot;active&quot;, &quot;Active cases:&quot;, datacenter[databox].cases.active);
                  this.setTheKick(s, &quot;critical&quot;, &quot;Cases in danger:&quot;, datacenter[databox].cases.critical);
                  this.setTheKick(s, &quot;recovered&quot;, &quot;Recovered:&quot;, datacenter[databox].cases.recovered);
                  this.setTheKick(s, &quot;deaths&quot;, &quot;Deaths:&quot;, datacenter[databox].deaths.total);
                  this.setTheKick(s, &quot;newdeaths&quot;, &quot;New deaths:&quot;, datacenter[databox].deaths.new);
                  home.appendChild(s);         
              }
          }
  
      })
  
  }
  
  componentDidMount() {
      this.onTaskHero(&quot;A&quot;);
  }
  
  render(){
  
      return(
          &lt;React.Fragment&gt;
              &lt;HeadHero head_2={&quot;COVID&quot;} head_3={&quot;UNDER CONSTRUCTION&quot;} /&gt;
              &lt;div class=&quot;sorting&quot;&gt;
              &lt;ul&gt;
                  &lt;li class=&quot;ltr gun&quot; data-letter=&quot;A&quot; onClick={() =&gt; { this.onTaskHero(&quot;A&quot;) }}&gt;A&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;B&quot; onClick={() =&gt; { this.onTaskHero(&quot;B&quot;) }}&gt;B&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;C&quot; onClick={() =&gt; { this.onTaskHero(&quot;C&quot;) }}&gt;C&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;D&quot; onClick={() =&gt; { this.onTaskHero(&quot;D&quot;) }}&gt;D&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;E&quot; onClick={() =&gt; { this.onTaskHero(&quot;E&quot;) }}&gt;E&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;F&quot; onClick={() =&gt; { this.onTaskHero(&quot;F&quot;) }}&gt;F&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;G&quot; onClick={() =&gt; { this.onTaskHero(&quot;G&quot;) }}&gt;G&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;H&quot; onClick={() =&gt; { this.onTaskHero(&quot;H&quot;) }}&gt;H&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;I&quot; onClick={() =&gt; { this.onTaskHero(&quot;I&quot;) }}&gt;I&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;J&quot; onClick={() =&gt; { this.onTaskHero(&quot;J&quot;) }}&gt;J&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;K&quot; onClick={() =&gt; { this.onTaskHero(&quot;K&quot;) }}&gt;K&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;L&quot; onClick={() =&gt; { this.onTaskHero(&quot;L&quot;) }}&gt;L&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;M&quot; onClick={() =&gt; { this.onTaskHero(&quot;M&quot;) }}&gt;M&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;N&quot; onClick={() =&gt; { this.onTaskHero(&quot;N&quot;) }}&gt;N&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;O&quot; onClick={() =&gt; { this.onTaskHero(&quot;O&quot;) }}&gt;O&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;P&quot; onClick={() =&gt; { this.onTaskHero(&quot;P&quot;) }}&gt;P&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;Q&quot; onClick={() =&gt; { this.onTaskHero(&quot;Q&quot;) }}&gt;Q&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;R&quot; onClick={() =&gt; { this.onTaskHero(&quot;R&quot;) }}&gt;R&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;S&quot; onClick={() =&gt; { this.onTaskHero(&quot;S&quot;) }}&gt;S&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;T&quot; onClick={() =&gt; { this.onTaskHero(&quot;T&quot;) }}&gt;T&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;U&quot; onClick={() =&gt; { this.onTaskHero(&quot;U&quot;) }}&gt;U&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;V&quot; onClick={() =&gt; { this.onTaskHero(&quot;V&quot;) }}&gt;V&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;W&quot; onClick={() =&gt; { this.onTaskHero(&quot;W&quot;) }}&gt;W&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;X&quot; onClick={() =&gt; { this.onTaskHero(&quot;X&quot;) }}&gt;X&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;Y&quot; onClick={() =&gt; { this.onTaskHero(&quot;Y&quot;) }}&gt;Y&lt;/li&gt;
                  &lt;li class=&quot;ltr&quot; data-letter=&quot;Z&quot; onClick={() =&gt; { this.onTaskHero(&quot;Z&quot;) }}&gt;Z&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
              &lt;div className=&quot;treeBody&quot;&gt;&lt;/div&gt;
          &lt;/React.Fragment&gt;
      );
  }
  </code></pre>
  <p>}
  export default CovidHero;</p>