01Clarian

import React from 'react';

class ClickCounter extends React.Component {
        constructor() {
            super()
            this.state = {
                count: 0
            }
        }
    increment = () => {

01Clarian

// MEMOIZATION AND CACHING: THE CONSTRUCTION FUNCTION EXAMPLE

// In order to better our understanding of Memoization, we will write a function
// entitled 'Building' and apply various logged results to observe the behaviour
// of JavaScript. 

// ****Additional Notes****

// In this example, you are the boss of a construction company.
// The construction company will be a reference to your Application.

01Clarian

import React from 'react'

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

    function matchValues () {
    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])) {

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')

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,{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,{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 from 'react'

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