Weather App

App.js

import React, { Component } from 'react';
import Aux from './hoc/Aux';
import './App.css';
import First from './Container/First';

class App extends Component {
  constructor()
  {
    super();
    this.state={
      name: "Jabalpur",
      isClick: false,
      
      // store arr here
      arr: []
    }
  }
  
  // moved here from First
 weatherChange=()=>
 {
    axios.get(`http://api.openweathermap.org/data/2.5/forecast?q=${this.props.name}&units=metric&appid=${API}`)
    .then((res)=>{
     this.setState({
         arr: res.data.list
     })
      
      console.log(this.state.arr);
      console.log(res.data.list[0].dt_txt);
     })
    .catch((err)=>{   
      console.error(err)
    })
 }
 
  handlePress=(e)=>{
    if(e.charCode===13)
    {
      this.setState({
        isClick:true
      })
      
      // call this on input press
      this.weatherChange()
    }
  }
  
 
  render() {
    let juju=null;
    return (
      <div className="App">
      <p> Welcome To Weather App </p>

      <Aux className="Apps">
      <input type="text" 
      onChange={(e)=>this.setState({name:e.target.value,isClick:false})} 
      value={this.state.name} 
      onKeyPress={this.handlePress}
      /> 
      <button onClick={(e)=>this.setState({isClick:true})}>Submit</button>
      </Aux>


      {
        this.state.isClick ?
          
          // pass down arr into First
      <First arr={this.state.arr} /> : juju
      }
      </div>
    );
  }
}

export default App;

First.js

import React, { Component } from 'react';
import axios from 'axios';
import Display from '../Display/Display';
const API='a4af8f2e3276efc9318e1269d0db0cf0';


class First extends Component {
    render()
    {
        let x=null;
        
        if(this.props.arr)
        {
         x  =this.props.arr.map((item,index)=>{
             return (
                 <Display key={index}
                  temp={item.main.temp}
                 />
             )
         })
        }
      
        
        return(
            <div>
                {x}
            </div>
        )
    }
}

export default First;