Getting an error in Reactjs. It says Unhandled Rejection (TypeError). But I already told it what to do if user types invalid name in input The Next CEO of Stack OverflowUnhandled rejection Error: Invalid pathReactJS - Element type is invalid errorReactJS “Unhandled Rejection (TypeError): this.state.features.map is not a function”Reactjs: Unhandled Rejection (TypeError): Cannot read property 'map' of undefinedWhy am I getting a TypeError when start typing in my input? - ReactJSReact Error Unhandled Rejection (TypeError): api_call.json is not a function. Fetch? async?Getting an error saying TypeError undefined is not an objectUnhandled Rejection (TypeError): Invalid attempt to spread non-iterable instanceHow to solve Element type is invalid error in ReactJS?Unhandled Rejection (TypeError): Failed to construct 'AudioWorkletNode' [ReactJS]
Increase performance creating Mandelbrot set in python
MAZDA 3 2006 (UK) - poor acceleration then takes off at 3250 revs
Return the Closest Prime Number
Is HostGator storing my password in plaintext?
Is it a good idea to use COLUMN AS (left([Another_Column],(4)) instead of LEFT in the select?
Is a stroke of luck acceptable after a series of unfavorable events?
Why is Miller's case titled R (Miller)?
How long to clear the 'suck zone' of a turbofan after start is initiated?
How to use tikz in fbox?
How to make a software documentation "officially" citable?
What's the point of interval inversion?
Only print output after finding pattern
Apart from "berlinern", do any other German dialects have a corresponding verb?
Why does GHC infer a monomorphic type here, even with MonomorphismRestriction disabled?
'Given that' in a matrix
Anatomically Correct Strange Women In Ponds Distributing Swords
% symbol leads to superlong (forever?) compilations
Implement the Thanos sorting algorithm
Why do professional authors make "consistency" mistakes? And how to avoid them?
Opposite of a diet
How to write papers efficiently when English isn't my first language?
What is the purpose of the Evocation wizard's Potent Cantrip feature?
What is meant by a M next to a roman numeral?
Horror movie/show or scene where a horse creature opens its mouth really wide and devours a man in a stables
Getting an error in Reactjs. It says Unhandled Rejection (TypeError). But I already told it what to do if user types invalid name in input
The Next CEO of Stack OverflowUnhandled rejection Error: Invalid pathReactJS - Element type is invalid errorReactJS “Unhandled Rejection (TypeError): this.state.features.map is not a function”Reactjs: Unhandled Rejection (TypeError): Cannot read property 'map' of undefinedWhy am I getting a TypeError when start typing in my input? - ReactJSReact Error Unhandled Rejection (TypeError): api_call.json is not a function. Fetch? async?Getting an error saying TypeError undefined is not an objectUnhandled Rejection (TypeError): Invalid attempt to spread non-iterable instanceHow to solve Element type is invalid error in ReactJS?Unhandled Rejection (TypeError): Failed to construct 'AudioWorkletNode' [ReactJS]
1
Just wanted to know if theres anyway I can get of Unhandled Rejection (TypeError). I already put an if else statement that tells it to render one or the other. Either the result, or the message saying input valid country. I already looked over the web for a while. Please let me know. Thanks. Here is my code and picture of error.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;
javascript reactjs react-native web-development-server
edited Mar 21 at 18:54
flppv
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
add a comment |
1
Just wanted to know if theres anyway I can get of Unhandled Rejection (TypeError). I already put an if else statement that tells it to render one or the other. Either the result, or the message saying input valid country. I already looked over the web for a while. Please let me know. Thanks. Here is my code and picture of error.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;
javascript reactjs react-native web-development-server
edited Mar 21 at 18:54
flppv
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
If you wrap your entiregetCitylogic in atry/catchand log out the error, what does it say?
– Tholle
Mar 21 at 16:35
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit sothis.getCityis never called and the state never gets set aside fromisSearchedbeing set totruewhen the button is clicked. BecauseisSearchedis changed totruebut the rest of the state remains undefined, on the re-render,this.state.flagand others are still undefined, so the system returns an error.
– Chimera.Zen
Mar 21 at 16:45
What is your React version ?
– Emidomenge
Mar 21 at 16:53
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58
add a comment |
1
1
1
Just wanted to know if theres anyway I can get of Unhandled Rejection (TypeError). I already put an if else statement that tells it to render one or the other. Either the result, or the message saying input valid country. I already looked over the web for a while. Please let me know. Thanks. Here is my code and picture of error.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;
javascript reactjs react-native web-development-server
edited Mar 21 at 18:54
flppv
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
Just wanted to know if theres anyway I can get of Unhandled Rejection (TypeError). I already put an if else statement that tells it to render one or the other. Either the result, or the message saying input valid country. I already looked over the web for a while. Please let me know. Thanks. Here is my code and picture of error.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;
javascript reactjs react-native web-development-server
javascript reactjs react-native web-development-server
edited Mar 21 at 18:54
flppv
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
edited Mar 21 at 18:54
flppv
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
edited Mar 21 at 18:54
flppv
1,7871128
edited Mar 21 at 18:54
flppv
1,7871128
edited Mar 21 at 18:54
flppv
1,7871128
1,7871128
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
asked Mar 21 at 16:29
Kenny QuachKenny Quach
225
225
If you wrap your entiregetCitylogic in atry/catchand log out the error, what does it say?
– Tholle
Mar 21 at 16:35
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit sothis.getCityis never called and the state never gets set aside fromisSearchedbeing set totruewhen the button is clicked. BecauseisSearchedis changed totruebut the rest of the state remains undefined, on the re-render,this.state.flagand others are still undefined, so the system returns an error.
– Chimera.Zen
Mar 21 at 16:45
What is your React version ?
– Emidomenge
Mar 21 at 16:53
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58
add a comment |
If you wrap your entiregetCitylogic in atry/catchand log out the error, what does it say?
– Tholle
Mar 21 at 16:35
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit sothis.getCityis never called and the state never gets set aside fromisSearchedbeing set totruewhen the button is clicked. BecauseisSearchedis changed totruebut the rest of the state remains undefined, on the re-render,this.state.flagand others are still undefined, so the system returns an error.
– Chimera.Zen
Mar 21 at 16:45
What is your React version ?
– Emidomenge
Mar 21 at 16:53
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58
If you wrap your entire
getCity logic in a try/catch and log out the error, what does it say?– Tholle
Mar 21 at 16:35
If you wrap your entire
getCity logic in a try/catch and log out the error, what does it say?– Tholle
Mar 21 at 16:35
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit so
this.getCity is never called and the state never gets set aside from isSearched being set to true when the button is clicked. Because isSearched is changed to true but the rest of the state remains undefined, on the re-render, this.state.flag and others are still undefined, so the system returns an error.– Chimera.Zen
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit so
this.getCity is never called and the state never gets set aside from isSearched being set to true when the button is clicked. Because isSearched is changed to true but the rest of the state remains undefined, on the re-render, this.state.flag and others are still undefined, so the system returns an error.– Chimera.Zen
Mar 21 at 16:45
What is your React version ?
– Emidomenge
Mar 21 at 16:53
What is your React version ?
– Emidomenge
Mar 21 at 16:53
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58
add a comment |
4 Answers
4
active
oldest
votes
1
when you submit empty value or invalid place you will get the error as you will try to get an unknown url. so you can check if city value is empty or not and also check the response from the api and update state accordingly
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
// check if input field is empty or not
if(city)
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
// check if value entered in input is valid
// so check api returns a valid response or not
if(data && !data.status)
this.setState(
isSearched: true,
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
else
this.setState(
isSearched:false
)
else
this.setState(
isSearched:false
)
And also change the button to type="submit"
<button type="submit" className="btn btn-success m-2">Search</button>
No need of toggleSearch method
Everthing will work fine
answered Mar 21 at 17:08
JS EngineJS Engine
823315
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
add a comment |
0
First you need to change your button to a submit type <button type="submit" ...> so this.getCity is called. If you need isSearched, call it from this.getCity or make a new submit function handleSearch() and put this.toggleSearch() and this.getCity() inside it.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
add a comment |
0
Looks like this line
const city = e.target.elements.cityname.value;
doesn't receive an expected value. As a result, you're fetching an unknow url here:
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
Then everything below are undefined and you're getting such errors.
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
How do I get it to render a message likeplease enter valid cityinstead of it rendering the error page? Thanks!
– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
add a comment |
0
import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55285096%2fgetting-an-error-in-reactjs-it-says-unhandled-rejection-typeerror-but-i-alre%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
when you submit empty value or invalid place you will get the error as you will try to get an unknown url. so you can check if city value is empty or not and also check the response from the api and update state accordingly
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
// check if input field is empty or not
if(city)
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
// check if value entered in input is valid
// so check api returns a valid response or not
if(data && !data.status)
this.setState(
isSearched: true,
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
else
this.setState(
isSearched:false
)
else
this.setState(
isSearched:false
)
And also change the button to type="submit"
<button type="submit" className="btn btn-success m-2">Search</button>
No need of toggleSearch method
Everthing will work fine
answered Mar 21 at 17:08
JS EngineJS Engine
823315
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
add a comment |
1
when you submit empty value or invalid place you will get the error as you will try to get an unknown url. so you can check if city value is empty or not and also check the response from the api and update state accordingly
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
// check if input field is empty or not
if(city)
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
// check if value entered in input is valid
// so check api returns a valid response or not
if(data && !data.status)
this.setState(
isSearched: true,
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
else
this.setState(
isSearched:false
)
else
this.setState(
isSearched:false
)
And also change the button to type="submit"
<button type="submit" className="btn btn-success m-2">Search</button>
No need of toggleSearch method
Everthing will work fine
answered Mar 21 at 17:08
JS EngineJS Engine
823315
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
add a comment |
1
1
1
when you submit empty value or invalid place you will get the error as you will try to get an unknown url. so you can check if city value is empty or not and also check the response from the api and update state accordingly
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
// check if input field is empty or not
if(city)
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
// check if value entered in input is valid
// so check api returns a valid response or not
if(data && !data.status)
this.setState(
isSearched: true,
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
else
this.setState(
isSearched:false
)
else
this.setState(
isSearched:false
)
And also change the button to type="submit"
<button type="submit" className="btn btn-success m-2">Search</button>
No need of toggleSearch method
Everthing will work fine
answered Mar 21 at 17:08
JS EngineJS Engine
823315
when you submit empty value or invalid place you will get the error as you will try to get an unknown url. so you can check if city value is empty or not and also check the response from the api and update state accordingly
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
// check if input field is empty or not
if(city)
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
// check if value entered in input is valid
// so check api returns a valid response or not
if(data && !data.status)
this.setState(
isSearched: true,
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
else
this.setState(
isSearched:false
)
else
this.setState(
isSearched:false
)
And also change the button to type="submit"
<button type="submit" className="btn btn-success m-2">Search</button>
No need of toggleSearch method
Everthing will work fine
answered Mar 21 at 17:08
JS EngineJS Engine
823315
edited Mar 21 at 17:37
answered Mar 21 at 17:08
JS EngineJS Engine
823315
answered Mar 21 at 17:08
JS EngineJS Engine
823315
answered Mar 21 at 17:08
JS EngineJS Engine
823315
823315
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
add a comment |
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
Thank you!!!! This worked for me
– Kenny Quach
Mar 21 at 17:42
add a comment |
0
First you need to change your button to a submit type <button type="submit" ...> so this.getCity is called. If you need isSearched, call it from this.getCity or make a new submit function handleSearch() and put this.toggleSearch() and this.getCity() inside it.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
add a comment |
0
First you need to change your button to a submit type <button type="submit" ...> so this.getCity is called. If you need isSearched, call it from this.getCity or make a new submit function handleSearch() and put this.toggleSearch() and this.getCity() inside it.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
add a comment |
0
0
0
First you need to change your button to a submit type <button type="submit" ...> so this.getCity is called. If you need isSearched, call it from this.getCity or make a new submit function handleSearch() and put this.toggleSearch() and this.getCity() inside it.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
First you need to change your button to a submit type <button type="submit" ...> so this.getCity is called. If you need isSearched, call it from this.getCity or make a new submit function handleSearch() and put this.toggleSearch() and this.getCity() inside it.
import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;import React, Component from 'react';
import './App.css';
import NavBar from "./navbar";
import axios from "axios";
import Accordion from './accordion';
import Accordions from './accordion';
import ErrorBoundary from "./Carousel";
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
// Call toggleSearch somewhere in here if you really need it
this.toggleSearch();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
const data = await api_call.json();
console.log(data);
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion
);
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched)
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
<Accordions name=this.state.name population=this.state.population subregion=this.state.subregion/>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<NavBar/>
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
/* Removed onClick and added type="submit" */
<button type="submit" className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
answered Mar 21 at 16:56
Chimera.ZenChimera.Zen
310415
310415
add a comment |
add a comment |
0
Looks like this line
const city = e.target.elements.cityname.value;
doesn't receive an expected value. As a result, you're fetching an unknow url here:
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
Then everything below are undefined and you're getting such errors.
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
How do I get it to render a message likeplease enter valid cityinstead of it rendering the error page? Thanks!
– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
add a comment |
0
Looks like this line
const city = e.target.elements.cityname.value;
doesn't receive an expected value. As a result, you're fetching an unknow url here:
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
Then everything below are undefined and you're getting such errors.
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
How do I get it to render a message likeplease enter valid cityinstead of it rendering the error page? Thanks!
– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
add a comment |
0
0
0
Looks like this line
const city = e.target.elements.cityname.value;
doesn't receive an expected value. As a result, you're fetching an unknow url here:
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
Then everything below are undefined and you're getting such errors.
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
Looks like this line
const city = e.target.elements.cityname.value;
doesn't receive an expected value. As a result, you're fetching an unknow url here:
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
Then everything below are undefined and you're getting such errors.
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
answered Mar 21 at 16:58
EmidomengeEmidomenge
184215
184215
How do I get it to render a message likeplease enter valid cityinstead of it rendering the error page? Thanks!
– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
add a comment |
How do I get it to render a message likeplease enter valid cityinstead of it rendering the error page? Thanks!
– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
How do I get it to render a message like
please enter valid city instead of it rendering the error page? Thanks!– Kenny Quach
Mar 21 at 16:59
How do I get it to render a message like
please enter valid city instead of it rendering the error page? Thanks!– Kenny Quach
Mar 21 at 16:59
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
@KennyQuach One solution will be to do an array containing all valid cities and then to check if the variable "city" match an element from your array
– Emidomenge
Mar 21 at 17:02
add a comment |
0
import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
add a comment |
0
import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
add a comment |
0
0
0
import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;import React, Component from 'react';
import './App.css';
class App extends Component
constructor(props)
super(props);
this.state =
flag: undefined,
name: undefined,
nativeName:undefined,
callingCodes: undefined,
capital: undefined,
currencies:undefined,
languages: undefined,
region:undefined,
population:undefined,
alpha3Code:undefined,
isSearched: false,
subregion: undefined,
error: ""
getCity = async(e) =>
e.preventDefault();
const city = e.target.elements.cityname.value;
const api_call = await fetch(`https://restcountries.eu/rest/v2/name/$city?fullText=true`);
api_call.json()
.then((data) =>
this.setState(
flag: data[0].flag,
name: data[0].name,
nativeName: data[0].nativeName,
alpha3Code: data[0].alpha3Code,
callingCodes: data[0].callingCodes,
capital: data[0].capital,
currencies: data[0].currencies[0].name,
languages: data[0].languages[0].name,
region: data[0].region,
population: data[0].population,
subregion:data[0].subregion,
error: ''
);
)
.catch((error) =>
this.setState(error)
)
toggleSearch = () =>
this.setState(
isSearched: true
)
render()
let search;
if(this.state.isSearched && this.state.error === '')
search =
<div className="content-1">
<div className="marginbottom">
<img className="flags" src=this.state.flag/>
<h2><span className="bold">Name:</span> this.state.name</h2>
<div><span className="bold">Native Name:</span> this.state.nativeName</div>
<div><span className="bold">Abbreviation:</span> this.state.alpha3Code</div>
<div><span className="bold">Calling Code:</span> this.state.callingCodes</div>
<div><span className="bold">Capital: </span>this.state.capital</div>
<div><span className="bold">Currencies:</span> this.state.currencies</div>
<div><span className="bold">Language:</span> this.state.languages</div>
<div><span className="bold">Region: </span>this.state.region</div>
<div><span className="bold">Population:</span> this.state.population</div>
</div>
</div>
else
search=<p>Enter a valid country name</p>;
return (
<div className="App">
<header className="App-header">
<h1>Globe Search</h1>
<h5>Search For Cities Around the Globe</h5>
</header>
<div class="content">
<form
onSubmit=this.getCity >
<input
placeholder="Enter Country"
type="text"
name="cityname"/>
<button onClick=this.toggleSearch className="btn btn-success m-2">Search</button>
</form>
<div>
<div>search</div>
</div>
</div>
</div>
);
export default App;answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
answered Mar 21 at 17:20
Makeen A. SabreeMakeen A. Sabree
23639
23639
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55285096%2fgetting-an-error-in-reactjs-it-says-unhandled-rejection-typeerror-but-i-alre%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
If you wrap your entire
getCitylogic in atry/catchand log out the error, what does it say?– Tholle
Mar 21 at 16:35
Saids the following: status: 404, message: "Not Found" TypeError: Cannot read property 'flag' of undefined at _callee$ (App.js:40) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3000/anonymous function) [as next] (localhost:3000/static/js/1.chunk.js:494:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:
– Kenny Quach
Mar 21 at 16:45
Maybe I'm off on this, but your button doesn't submit so
this.getCityis never called and the state never gets set aside fromisSearchedbeing set totruewhen the button is clicked. BecauseisSearchedis changed totruebut the rest of the state remains undefined, on the re-render,this.state.flagand others are still undefined, so the system returns an error.– Chimera.Zen
Mar 21 at 16:45
What is your React version ?
– Emidomenge
Mar 21 at 16:53
@Emidomenge React16
– Kenny Quach
Mar 21 at 16:58