title: Data fetch although I'm not clicking the button yet
body: <p>right now I'm learning react. I still new about this. So, I make a little code here.</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import axios from "axios";
  
  const Search = () =&gt; {
    const [data, setData] = useState({});
    const [country, setCountry] = useState("");
    const [countryFromButtonClick, setCountryFromButtonClick] = useState();
  
    useEffect(() =&gt; {
      axios
        .get(`https://corona.lmao.ninja/countries/${countryFromButtonClick}`)
        .then(res =&gt; {
          console.log(res.data);
          setData(res.data);
        })
        .catch(err =&gt; {
          console.log(err);
          console.log(err.response.data.message);
        });
    }, [countryFromButtonClick]);
  
    const HandleChange = e =&gt; {
      setCountry(e.target.value);
    };
  
    const handleClick = () =&gt; {
      setCountryFromButtonClick(country);
    };
  
    return (
      &lt;section id="search-country"&gt;
        &lt;h1&gt; Number of Cases &lt;/h1&gt;
        &lt;div className="container-fluid"&gt;
          &lt;div className="input-group mb-3"&gt;
            &lt;input
              type="text"
              className="form-control"
              placeholder="Search Country..."
              value={country}
              onChange={HandleChange}
            /&gt;
            &lt;div className="input-group-append"&gt;
              &lt;button
                className="btn btn-outline-secondary"
                type="button"
                id="button-addon2"
                onClick={handleClick}
              &gt;
                Search
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;h1&gt;
            {data.country} {data.cases}
          &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    );
  };
  
  export default Search;
  
  </code></pre>
  
  <p>The problem is, I'm not clicking the search button yet, but It's already fetch the data.
  The console showing error from <code>console.log(err)</code>.
  Is there anything I can do, So the data only fetch when I click the button? </p>
  
  <p>Thanks.</p>