I'm continuously having a problem with country-state-city in my react app. Code to pull it is as follows and the error is right below it. I haven't the slightest clue and I've been searching everywhere.
import { useState, useEffect } from 'react';
import { Box, TextField, Button, InputAdornment } from '@mui/material';
import csc from 'country-state-city';
export const Markups = () => {
const [country, setCountry] = useState({});
useEffect(() => {
const getStates = async() => {
try {
let country_abbrv = 'US';
let country = await csc.getCountryByCode(country_abbrv);
let temp_states = await csc.getStatesOfCountry(country.isoCode);
console.log(temp_states);
} catch (err) {
console.log(err);
}
};
getStates();
})
TypeError: Cannot read properties of undefined (reading 'getCountryByCode')
at getStates (index.js:13:1)
at index.js:22:1
at commitHookEffectListMount (react-dom.development.js:23142:1)
at commitPassiveMountOnFiber (react-dom.development.js:24920:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24885:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24872:1)
at commitPassiveMountEffects (react-dom.development.js:24860:1)
at flushPassiveEffectsImpl (react-dom.development.js:27032:1)
at flushPassiveEffects (react-dom.development.js:26978:1)
at commitRootImpl (react-dom.development.js:26929:1)
According to their docs, that method does not exist on the default export. Instead it exports City, Country, etc.
import { Country, State, City } from 'country-state-city';
City.getCountryByCode(countryCode);