import React, { useState } from 'react';
function CountrySearch() {
const [searchQuery, setSearchQuery] = useState('');
const [countries, setCountries] = useState([]);
const fetchCountries = async (query) => {
try {
const response = await fetch(`
https://studies.cs.helsinki.fi/restcountries/api/name/${query}`);
if (!response.ok) {
throw new Error('Country not found');
}
const data = await response.json();
console.log("Fetched data:", data);
// const country = data[0];
//console.log("Country:", country.name.common);
setCountries(data);
} catch (error) {
console.error('Error fetching countries:', error);
setCountries([]);
}
}
const handleSearchChange = (event) => {
setSearchQuery(event.target.value);
};
const handleSearch = (event) => {
event.preventDefault();
fetchCountries(searchQuery);
};
return (
<div>
<h2>Country data</h2>
<form onSubmit={handleSearch}>
<div>
Country: <input type="text" value={searchQuery} onChange={handleSearchChange} />
</div>
<div>
<button type="submit">search</button>
</div>
</form>
<h2>Countries</h2>
<ul>
{Array.isArray(countries) && countries.map(country => (
<li key={country.ccn3}>
<h3>{country.name.common} ({country.name.official})</h3>
<p><strong>Capital:</strong> {country.capital?.[0]}</p>
<p><strong>Region:</strong> {country.region}</p>
</li>
))}
</ul>
</div>
);
}
const App = () => {
return <CountrySearch />;
}
export default App