title: Uncaught TypeError: inputArgs[0].match is not a function
body: <p>I am starting to learn to react with REST Countries API. I have to face the error &quot;Uncaught TypeError: inputArgs[0].match is not a function&quot; in console. also, console data shows duplicate results. <a href="https://i.stack.imgur.com/GWFZ1.png" rel="nofollow noreferrer">you can see the screenshot</a>.</p>
  <p>here is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useEffect, useState } from "react";
  import "./App.css";
  
  const gridStyle = {
      display: "grid",
      gridTemplateColumns: "repeat(4, 1fr)",
      gridGap: "20px",
  };
  
  function App() {
      return (
          &lt;div className="App"&gt;
              &lt;Countries&gt;&lt;/Countries&gt; 
          &lt;/div&gt;
      );
  }
  
  function Countries() {
      const [countries, setCountries] = useState([]);
      useEffect(() =&gt; {
          fetch("https://restcountries.com/v3.1/all")
              .then((res) =&gt; res.json())
              .then((data) =&gt; setCountries(data));
      }, []);
  
      return (
          &lt;div className="all-countries"&gt;
              &lt;p&gt;{countries.length}&lt;/p&gt;
              &lt;div style={gridStyle} className="country-container"&gt;
                  {countries.map((country) =&gt; (
                      &lt;Country country={country}&gt;&lt;/Country&gt;
                  ))}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  function Country({ country }) {
      console.log(country);
      return (
          &lt;div className="country"&gt;
              &lt;img src={country.flags.png} alt="" /&gt;
              &lt;h1&gt;{country.name.common}&lt;/h1&gt;
              &lt;p&gt;{country.name.official}&lt;/p&gt;
              &lt;p&gt;{country.region}&lt;/p&gt;
              &lt;p&gt;{country.population}&lt;/p&gt;
              &lt;button&gt;Details&lt;/button&gt;
          &lt;/div&gt;
      );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>