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(".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.namemon}</h1>
            <p>{country.name.official}</p>
            <p>{country.region}</p>
            <p>{country.population}</p>
            <button>Details</button>
        </div>
    );
}

<script src=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>

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./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.mon}</h1>
            <p>{country.name.official}</p>
            <p>{country.region}</p>
            <p>{country.population}</p>
            <button>Details</button>
        </div>
    );
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

• javascript
• reactjs
• react-hooks
• jsx

10 Answers 10

I got around the error by passing string as first argument.

console.log('', data)

I think this was broken by a recent mit in the React Dev Tools Chrome Extension: https://github./facebook/react/mit/852f10b5cf188f8aa797f9a809f0caeaa95a4231

Hopefully that mit 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

The whole day I tried to fix this issue and finally realized it happened from the React dev tool So I think it will fix by the React dev tool authorizer.

i had the same problem, but it worked when i removed the console.log(variable)

Remove React Dev tool. This is the only solution i've discovered till now and it works.

if you check a few lines down in Uncaught TypeError message, maybe find a file name you've modified. for me, it was App.jsx. and i found console.log(variable) when i remove this, all clear

I am face the same problem and solved by following way...

use useEffect to console.log(user) or console.dir(user) the user from useState

useEffect(()=>{
       if (user) {
         console.log(user);
         console.dir(user)
        } 
 },[user])

its working for me, try and let me know through reply this ment

As @francis mentioned, a simple solution that adds no dependencies with using any hooks is to start by logging a string followed by your variable.

console.log("", variable_name);

I removed the React.StrictMode tags in index.js and that worked for me. Just ment out

//<React.StrictMode>
    <App />
//</React.StrictMode>