01Clarian

import React from 'react'

const Form = (props) => {
    return (
        <form onSubmit={props.getWeather}>
            <input
            type='text'
            placeholder='city'
            name='city'
            />

01Clarian

import React from 'react'

const Form = (props) => {
    return (
        <form onSubmit={props.getWeather}>
            <input
            type='text'
            placeholder='city'
            name='city'
            />

01Clarian

import React from 'react'

const Weather = ({description, city, country, error, temperature}) => {
    return (
        <div>
            {city && country && <p>{city}, {country}</p>}
            {temperature && <p>{temperature}</p>}
            {description && <p> {description}</p>}
            {error && <p>{error}</p>}
        </div>

01Clarian

import React from 'react'

const Form = (props) => {
    return (
        <form onSubmit={props.getWeather}>
            <input
            type='text'
            placeholder='city'
            name='city'
            />

01Clarian

import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';

function App() {
  const [weather,setWeather] = useState([])
  const APIKEY = 'INSERT YOUR OWN KEY HERE'

  async function fetchData(e) {

01Clarian

import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';

function App() {
  const [weather,setWeather] = useState([])
  const APIKEY = '00517648ed782c3f434fed840bcfd50e'

  async function fetchData(e) {

01Clarian

import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';

function App() {
  const [weather,setWeather] = useState([])
  const APIKEY = '00517648ed782c3f434fed840bcfd50e'

  async function fetchData(e) {

01Clarian

import React,{useState} from 'react';
import './App.css';
import Form from './Form';
import Weather from './Weather';

function App() {
  const [weather,setWeather] = useState([])
  const APIKEY = '00517648ed782c3f434fed840bcfd50e'

  async function fetchData(e) {

01Clarian

import React from 'react'

const Weather = ({description, city, country, error, temperature}) => {
    return (
        <div>
            {city && country && <p>{city}, {country}</p>}
            {temperature && <p>{temperature}  °F</p>}
            {description && <p> Conditions: {description}</p>}
            {error && <p>{error}</p>}
        </div>

01Clarian

import React from 'react'

const Weather = ({description, city, country, error, temperature}) => {

    if(description) {
        const weatherDescription = description.split(' ')
        const keyWords = ['cloudy','clouds', 'cloud', 'overcast']
        for(let i = 0; i < weatherDescription.length; i++) {
            if(keyWords.includes(weatherDescription[i])) {
                console.log(weatherDescription[i], ': we have a match')