Eu queria integrar essas duas API diferentes em um useState
const nomePaises = import.meta.env.VITE_PAISES_API_NOME;
const bandeiras = "node_modules/bandeiras/paises.json";
eu consegui inserir no component ListPaises.jsx, mas, só aparece uma lista de cada API e não as duas, toda vez que dou um F5, fica trocando entre um e outro na web
const nomePaises = import.meta.env.VITE_PAISES_API_NOME;
const bandeiras = "node_modules/bandeiras/paises.json";
const [paises, setPaises] = useState([]);
const getPaises = async (url) => {
const res = await fetch(url)
const data = await res.json();
setPaises(data);
}
useEffect(() => {
const nomeURL = `${nomePaises}`
const bandeirasURL = `${bandeiras}`
getPaises(nomeURL);
getPaises(bandeirasURL);
}, [])
return (
<div className="panel">
<div className="component-list">
<div className="component-list-detail flex">
<h2>Países</h2>
<div className="list2 flex">
<h2>Economia</h2>
<h2>Localização(continente)</h2>
</div>
</div>
{
paises.length > 0 &&
paises.map((pais) => <ListPaises pais={pais}/>)
}
</div>
</div>
)
Queria encontrar alguma outra maneira de colocar as duas API, e estou usando REACT