I am starting to learn to react with REST Countries API. I have to face the error "Uncaught TypeError: inputArgs[0].match is not a function" in console. also, console data shows duplicate results. you can see the screenshot.
here is my code
import { useEffect, useState } from "react";
import "./App.css";
const gridStyle = {
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gridGap: "20px",
};
function App() {
return (
<div className="App">
<Countries></Countries>
</div>
);
}
function Countries() {
const [countries, setCountries] = useState([]);
useEffect(() => {
fetch("https://restcountries.com/v3.1/all")
.then((res) => res.json())
.then((data) => setCountries(data));
}, []);
return (
<div className="all-countries">
<p>{countries.length}</p>
<div style={gridStyle} className="country-container">
{countries.map((country) => (
<Country country={country}></Country>
))}
</div>
</div>
);
}
function Country({ country }) {
console.log(country);
return (
<div className="country">
<img src={country.flags.png} alt="" />
<h1>{country.name.common}</h1>
<p>{country.name.official}</p>
<p>{country.region}</p>
<p>{country.population}</p>
<button>Details</button>
</div>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>I got around the error by passing string as first argument.
console.log('', data)
I think this was broken by a recent commit in the React Dev Tools Chrome Extension: https://github.com/facebook/react/commit/852f10b5cf188f8aa797f9a809f0caeaa95a4231
Hopefully that commit gets reverted soon.
I had a similar issue, for me the real error was in the stack trace before the one that says "Uncaught Type Error InputArgs[0].match ..."
So clear the console, then run it again to get the stack trace then scroll all the way up to see the error.
HTH