• Estoy usando useState para actualizar la respuesta de la API.

• Luego, tomo los datos que necesito y los mapeo en una nueva matriz (arr)

• Después del paso anterior, estoy actualizando el gancho useState "setData" para usar el estado "datos"

• Pero me está dando el error "Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función"

Aquí está la parte del código con el que tengo problemas

 import {useEffect, useState} from 'react' import logo from './logo.svg'; import './App.css'; import axios from 'axios' import ReactSearchBox from 'react-search-box' import { set } from 'express/lib/application'; function App() { let [data, setData] = useState() useEffect(onMount,[]) function onMount(){ axios.get('https://restcountries.com/v3.1/all').then(res=>{ let arr = res.data.map((c)=>{ return {key:c.name.common, value: c.name.common} }) setData(arr) }) }

Mi código de página completa

 import "./styles.css"; import axios from 'axios' import ReactSearchBox from 'react-search-box' import {useEffect, useState} from 'react' export default function App() { let [data, setData] = useState() useEffect(onMount,[]) function onMount(){ axios.get('https://restcountries.com/v3.1/all').then(res=>{ let arr = res.data.map((c)=>{ return {key:c.name.common, value: c.name.common} }) setData(arr) }) } return ( <div className="App"> <h1>Countries</h1> {data.length>0 ? <ReactSearchBox placeholder="Placeholder" value="Doe" data={data} callback={(record) => console.log(record)} />: null} </div> ); }

Imagen de error