I’m new to React.js and was unsure why my app won’t build properly. I’ve tried adding/removing .catch() after my async statements but it doesn’t seem to make any difference.
OS: Windows 10
React: 17.0.2
The compilation message (it just stays there):
error message
import {useState} from 'react'
const Form = () => {
const [text, setText] = useState('')
const [data, setData] = useState('')
const fetchData = async() => {
const res = await fetch("https://avwx.rest/api/metar/" + text,
{headers : {"Authorization": "key"}})
.catch((error) => {return Promise.reject()})
const rawJSON = await res.json().catch((error) => {return Promise.reject()})
console.log(rawJSON)
setData(rawJSON)
}
const onSubmit = (e) => {
e.preventDefault()
if (text.length !== 4) {
alert("Input valid ICAO airport code")
return
}
fetchData()
setText('')
}
return (
<form onSubmit = {onSubmit}>
<div className = "lbl">
<label>
Airport Code (ICAO): {' '}
</label>
</div>
<input type="text" value={text} onChange={(e) => setText(e.target.value)}/>
<input className = 'btn' type="submit" value="Go" />
<p className = "data">{JSON.stringify(data.raw, null, 2)}</p>
</form>
)
}
export default Form