Si estás usando los React Hooks, entonces no puedes usar la palabra reservada this.
Además, la manera en la que se utilizan los estados en esta nueva versión de React también varía en otras cosas.
Solución propuesta
Para mostrarte su uso correcto, le hice varias modificaciones a tu código para conseguir lo que querías lograr.
import axios from "axios";
import React, { useState, useEffect } from "react";
function SelectAxios() {
const [data, setData] = useState([" "]);
useEffect(() => {
axios
.get(`https://ubicaciones.paginasweb.cr/provincias.json`)
.then((response) => {
console.log("response", Object.keys(response.data).length);
let dataToArray = [];
for (
let index = 1;
index < Object.keys(response.data).length;
index++
) {
console.log("response2");
dataToArray.push(response.data[index]);
}
setData(dataToArray);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<div>
<h1>Axios</h1>
<hr />
<select name="provincias" className="form-control">
<option>Elije una Provincia</option>
{data.map((el) => {
return (
<option key={el} value={el}>
{el}
</option>
);
})}
</select>
</div>
);
}
export default SelectAxios;

Puedes probarlo en SandBox y verificar si era lo que estabas buscando.
Características del código
Ahora pasaré a explicar algunas características de este código.
Para empezar es el uso de los estados en esta versión de React.
Fíjate que se hace por medio de useState
, lo que hace innecesario el uso del this
a la hora de llamar un estado. El estado se llama como si de un objeto más se tratara.
Y lo mismo pasa al setear el estado. No es necesario el this.setState()
, si no más bien se utiliza en este caso el setData
.
Este setData
es una función para modificar el estado cuyo nombre varía según lo que quieras ponerle, aunque por convención siempre tiene el mismo nombre del estado y la palabra "set" antepuesta.
Otra característica de este código es la manera en la que transformo en array los datos que vienen de la API:
let dataToArray = [];
for (
let index = 1;
index < Object.keys(response.data).length;
index++
) {
console.log("response2");
dataToArray.push(response.data[index]);
}
setData(dataToArray);
Lo que hice fue recorrer el objeto data
del response
con un bucle for
que se repite por la cantidad de propiedades que tiene dicho objeto. La cantidad de propiedades que tiene el objeto de la respuesta se pueden contar con el Object.keys(response.data).length
Luego le voy haciendo .push
al nuevo array que creé con response.data[index]
. De esa forma puedo acceder a cada una de las propiedades del objeto.
Finalmente actualizo el estado data
con el nuevo array mediante el setData()
.
Por último, la manera correcta de hacer el .map
es utilizando el return
por cada <option>
del Select.
<select name="provincias" className="form-control">
<option>Elije una Provincia</option>
{data.map((el) => {
return (
<option key={el} value={el}>
{el}
</option>
);
})}
</select>