text: import React, { useState, useEffect } from 'react';
  import Header from './Components/Header';
  import Form from './Components/Form';
  import Clima from './Components/Clima';
  import Error from './Components/Error';
  
  function App() {
    // state del formulario
    const [busqueda, guardarBusqueda] = useState({
      ciudad: '',
      pais: ''
    });
  
    const [consultar, guardarConsultar] = useState(false);
    const [resultado, guardarResultado] = useState({});
    const [error, guardarError] = useState(false);
  
    const { ciudad, pais } = busqueda;
  
    useEffect(() => {
      const consultarAPI = async () => {
  
        if (consultar) {
  
          const API_KEY = process.env.REACT_APP_API_KEY;
          const url = `https://api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${API_KEY}`;
  
          const respuesta = await fetch(url);
          const resultado = await respuesta.json();
  
          guardarResultado(resultado);
          guardarConsultar(false);
  
          // Detecta si hubo resultados correctos en la consulta
  
          if (resultado.cod === "404") {
            guardarError(true);
          } else {
            guardarError(false);
          }
        }
  
      }
      consultarAPI();
      // eslint-disable-next-line
    }, [consultar]);
  
    let componente;
    if (error) {
      componente = <Error mensaje="No hay resultados" />
    } else {
      componente = <Clima
        resultado={resultado}
      />
    }
  
    return (
      < >
        <Header titulo="🌤 ClimApp 🌨" />
        <div className="contenedor-form">
          <div className="container">
            <div className="row">
              <div className="col m6 s12">
                <Form
                  busqueda={busqueda}
                  setBusqueda={guardarBusqueda}
                  setConsulta={guardarConsultar}
                />
              </div>
              <div className="col m6 s12">
                {componente}
              </div>
            </div>
          </div>
        </div>
      </ >
    );
  }
  
  export default App;
  