Cuando verificó la respuesta de la URL que mencionó, parece que está pasando un valor incorrecto. Si solo está tratando de obtener el nombre del país, como Uruguay, por ejemplo, este valor está en el objeto y se puede acceder a él como [index].name.common . Pero estás pasando [index].name que da el objeto en sí.

Creo que necesita configurar el país de manera diferente como

 <div> {countries.map ((c) => <Countries country = {c.name}/>) } </div>

Y accede como

 const Countries = (country) => { console.log('countries:', country) return ( <li>{country.common}</li>) }

O simplemente haga lo siguiente en su código existente, ya que ya pasó el objeto que tiene una propiedad común y, en última instancia, tiene un nombre.

 return ( <li>{country.common.name}</li>)

Acabo de intentar ver la respuesta del enlace que ha proporcionado y con suposiciones y creo que debería funcionar.

Nota : puede pasar directamente el nombre del país si solo desea obtener los nombres de los países como c.name.common y como return ( <li>{country}</li>) en su código existente.

así que entiendo que los países son una serie de objetos, y una vez que pasa

{countries.map ((c) => <Countries country = {c} key ={c.name}/>) }

se convierte en un objeto, pensé que podría llamar a object.properties pero no puedo. así que no estoy seguro de qué hacer a continuación.

Estás en lo correcto. Puede pasar los valores como accesorios entre componentes y puede obtener las propiedades de ellos si ese accesorio es un objeto.

 const Countries = (country) => {

Los estás pasando como accesorios. Pero la variable es un objeto. Básicamente, React envía los accesorios de un componente a otro a través de accesorios, que es un objeto de propiedad. Por ejemplo, <Component a={value} /> es el componente que estamos llamando. const Component = (props) => {...} es el componente que definimos.

Entonces, los props contienen toda la información en forma de objeto. props = {a: value} . En su caso, const Countries = (country) => { country es el objeto prop. Puede acceder a la propiedad desde ella como country.country o puede destruirlos. Tu código debería ser así.

 const Countries = ({ country }) => {

o

 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> )}

Al obtener datos como este, es clave registrar en la consola lo que realmente está recibiendo y profundizar en los datos que realmente está recibiendo. En su caso, estaba obteniendo toda la gama de datos de un país. En mi código, lo reduje al nombre común del país y arreglé algunos errores secundarios de reacción.