title: react button for refresh(re-call) API
body: <p>I have an API that gives me a random location each time I recall the API, and I want the button to just re-call the API.</p>
  
  <p>I tried to use an arrow function and a normal function but I get a different error; my general idea is to wrap the fetching method with a function and then call this function twice, the first call before I render the component and the second call on this button.</p>
  
  <p>These are my attempts:</p>
  
  <p>(Note: my buggy function is <code>handleOnClick</code>)</p>
  
  <pre><code> state = {
     isLoading: true,
     shop: null, 
     error: null
   };
  
   componentDidMount() {
     // fix CORB and CORS issues by using proxy
     var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
       targetUrl ='https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&amp;g%20et_param=value';
  
       function handleOnClick() {
         fetch(proxyUrl + targetUrl)
       .then(res =&gt; res.json())
       .then(shop =&gt; {
         console.table(shop); // create table in console 
         this.setState({ 
           shop ,
           isLoading:false,
         });
       })
       .catch(e =&gt; {
         console.log(e);
       });    
     }
  
     handleOnClick();
   }
  
  
     showLocation = () =&gt; {
     var location = `${this.state.shop.lat}%2C%20${this.state.shop.lon}`;
    var gmapurl =`https://maps.google.com/maps?q=${location}&amp;t=&amp;z=17&amp;ie=UTF8&amp;iwloc=&amp;output=embed`;
    return gmapurl;
  };
  
  
  
   render() {
  
     const { isLoading, shop, error } = this.state; //no need to write this.state every time
  
  
  
     let gmapurl ;  //create variable that we will store the new location from the API 
  
     return (  
  
  
       &lt;React.Fragment&gt;
            &lt;Navigation /&gt;
  
       &lt;div&gt; 
       {/* // Display a message if we faced an error */}
       {error ? &lt;p&gt;{error.message}&lt;/p&gt; : null} 
       {!isLoading ? ( //   check data if it ready 
       //and take lat and lon from api ,and place it in  embedded google map url
      gmapurl =`https://maps.google.com/maps?q=${this.state.shop.lat}%2C%20${this.state.shop.lon}&amp;t=&amp;z=17&amp;ie=UTF8&amp;iwloc=&amp;output=embed`,
  
         shop ? (
           &lt;div&gt;
  
             &lt;h1&gt; {this.state.shop.name}&lt;/h1&gt;
          {/* MAP */}  
          &lt;div className="mapouter MapPage"&gt;&lt;div className="gmap_canvas"&gt;
             &lt;iframe width="768" height="500" id="gmap_canvas" src={gmapurl} 
             frameBorder="0" scrolling="false" marginHeight="0" marginWidth="0"&gt;
             &lt;/iframe&gt;
             &lt;h1&gt;map veiw&lt;/h1&gt;&lt;/div&gt; 
             &lt;/div&gt;
  
  
             &lt;button className="btn" onClick={() =&gt;  {handleOnClick}}&gt; &lt;div className="lds-ellipsis"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;أقتراح آخر&lt;/button&gt;
  
          &lt;/div&gt; ) : ( '')
  ):(      // show loading icon if there is a delay in data
  &lt;div&gt; &lt;img src={loadingpic}&gt;&lt;/img&gt;  &lt;/div&gt;
   )
       }
       &lt;/div&gt;
       &lt;/React.Fragment&gt;
     );
   }
  }
  </code></pre>
  
  <p><strong>and this the error I got</strong> </p>
  
  <pre><code>
    Line 82:  Expected an assignment or function call and instead saw an expression no-unused-expressions
  
    Line 82:  'handleOnClick' is not defined  no-undef
  
  </code></pre>