I want to print the names of every country, I am still new to this. So, if you don't mind, can you please explain my mistake?
I understand that countries is an array of objects, and once it passes through
{countries.map ((c) => <Countries country = {c} key ={c.name}/>) }
it becomes an object, I thought I could call object.properties but I can't. I am not sure what to do next.
import axios from 'axios'
import {useState, useEffect} from 'react'
const App = () => {
const [countries, setCountries] = useState([])
const hook = () => {
console.log('effect')
axios
.get('https://restcountries.com/v3.1/all')
.then(response => {
console.log('promise fulfilled')
setCountries(response.data)
})
}
useEffect(hook, [])
const Countries = (country) => {
console.log('countries:', country)
return ( <li>{country.name}</li>)
}
console.log(countries)
return (
<div>
{countries.map ((c) => <Countries country = {c}/>) }
</div>
)}
export default App;
When checked the response from the url you've mentioned, seems like you are passing wrong value. If you are just trying to get the country name like Uruguay for example, this value is in object and can be accessed as [index].name.common. But you're passing [index].name which gives the object itself.
I believe you need to set the country differently as
<div>
{countries.map ((c) => <Countries country =
{c.name}/>) }
</div>
And access as
const Countries = (country) => {
console.log('countries:', country)
return ( <li>{country.common}</li>)
}
Or just do the following in your existing code as you've already passed the object which has property common and it ultimately has name.
return ( <li>{country.common.name}</li>)
I've just tried seeing the response from the link you've given and with assumptions and I think it should work.
Note : You can directly pass the country name if you're just wishing to get the names of the countries as c.name.common and as return ( <li>{country}</li>) in your existing code.
so I understand that countries are an array of objects, and once it gets passed through
{countries.map ((c) => <Countries country = {c} key ={c.name}/>) }it becomes an object, I thought I could call object.properties but I cant. so I am not sure what to do next.
You are correct. You can pass the values as props between components and you can get the properties from them if that prop is an object.
const Countries = (country) => {
You are passing them as props. But the variable is an object. Basically, React send the props from one component to another component via props which is a property object. Eg, <Component a={value} /> is the component that we are calling. const Component = (props) => {...} is the component that we defined.
So the props is containing all the information in object form. props = {a: value}. In your case, const Countries = (country) => { country is the prop object. You can access the property from it as country.country or you can destruct them. You code should be like this.
const Countries = ({ country }) => {
or
const Countries = (country) => {
...
return ( <li>{country.common}</li>)
}
const [countries] = useState([])
const [array , setArray] = useState([])
const hook = () => {
axios
.get('https://restcountries.com/v3.1/all')
.then(response => {
for(var i=0; i<response.data.length; i++){
// if more than data length, dont add (for if useEffect runs twice.)
if(countries.length < response.data.length){
// pushes country's common name (change "common" to "official" for the official country name)
countries.push(response.data[i].name.common)
} else {}
}
// this second array is for actually rendering the list
setArray(countries)
})
}
useEffect(hook, [])
return (
<div>
{array.map (c => (<li key={c}>{c}</li>))}
</div>
)}
When fetching data like this it's key to console log what you're actually receiving and dive deeper into the data you are actually receiving. In your case, you were fetching a country's entire array of data. In my code, I narrowed it down to the common name of the country, and fixed some react child errors.