title: How to use the IF statement to avoid the Weather API fetch result crashing once the user types wrong the city name?
body: <h4>Summarizing The Problem</h4>
  <h5>- Details About The Goal</h5>
  <p>
  A weather app that renders on the screen the data fetched from OpenWeather API.
  </p>
  <h5>- Actual and Expected Results</h5>
  <p>
  Whether the user types correctly or not the city name or presses enter in the empty field, no result render on the screen. I would like help to resolve it.
  </p>
  <h4>What it Has Been Tried So Far (Update 1.1)</h4>
  <p>
  I've placed a conditional operator below the *Search* component in the *App.js* file:
  </p>
  <pre><code>{typeof dataSearch === &quot;undefined&quot; ? (&lt;&gt;&lt;/&gt;) : ()}
  </code></pre>
  <pre><code>{typeof dataSearch === &quot;undefined&quot; ? (
    &lt;&gt;&lt;/&gt;
  ) : (
    &lt;&gt;
      &lt;CurrentWeather resultData={weatherData} /&gt;
      &lt;ForecastWeather resultData={forecastData} /&gt;
    &lt;/&gt;
  )}
  </code></pre>
  <p>I would not expect that it would leave the screen blank.</p>
  <p>Well, thank you for reading my post.</p>
  </p>
  <h4>The Complete Code</h4>
  <h5>- App.js (Update 1.1)</h5>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Api } from &quot;./Api&quot;;
  import { Container } from &quot;react-bootstrap&quot;;
  import {
    Search,
    CurrentWeather,
    ForecastWeather,
    Footer,
  } from &quot;./components/index&quot;;
  import &quot;./App.css&quot;;
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  
  function App() {
    const [weatherData, setWeatherData] = useState(null);
    const [forecastData, setForecastData] = useState(null);
  
    const handleSearchLocation = (dataSearch) =&gt; {
  
      const weatherDataFetch = fetch(
        `${Api.url}/weather?q=${dataSearch}&amp;units=metric&amp;appid=${Api.key}`
      );
      const forecastDataFetch = fetch(
        `${Api.url}/forecast?q=${dataSearch}&amp;units=metric&amp;appid=${Api.key}`
      );
  
      Promise.all([weatherDataFetch, forecastDataFetch]).then(
        async (response) =&gt; {
          const weatherResponse = await response[0].json();
          const forecastResponse = await response[1].json();
  
          setWeatherData(weatherResponse);
          setForecastData(forecastResponse);
        }
      );
    };
  
    return (      
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;contentApp&quot;&gt;
          &lt;Container&gt;
            &lt;Search
              searchResultData={handleSearchLocation}
              textPlaceholder=&quot;Search for a place...&quot;
            /&gt;
            {typeof dataSearch === &quot;undefined&quot; ? (&lt;&gt;&lt;/&gt;) : (
              &lt;&gt;
            &lt;CurrentWeather resultData={weatherData} /&gt;
            &lt;ForecastWeather resultData={forecastData} /&gt;
            &lt;/&gt;
            )}
            &lt;Footer /&gt;
          &lt;/Container&gt;
        &lt;/div&gt;     
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>
  Yippee-ki-yay
  </p>