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
    }
  }
  handlePress=(e)=>{
    if(e.charCode===13)
    {
      this.setState({
        isClick:true
      })
    }
  }
 
  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 ?
      <First name={this.state.name} /> : juju
      }
      </div>
    );
  }
}

export default App;

First.js

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


let x=null;
class First extends Component {
constructor(props)
{
    super(props);
    this.state={
        arr:[],
        isTrue:true
       
    }
   
}




componentDidMount(){
    this.weatherChange();
}
componentWillReceiveProps(nextprops)
{
    console.log(nextprops.name)
    console.log(this.props.name)


}


componentDidUpdate()
    
 {
     this.weatherChange();
     
 }
 weatherChange=()=>
 {
    axios.get(`http://api.openweathermap.org/data/2.5/forecast?q=${this.props.name}&units=metric&appid=${API}`)
    .then((res)=>{
   
     if(this.state.isTrue)
     {
     this.setState({
         arr:res.data.list,
         isTrue:false
     })
     console.log(this.state.isTrue);

    }

     
      console.log(this.state.arr);
      console.log(res.data.list[0].dt_txt);
     })
    .catch((err)=>{   
     
    })
   

 }

    render()
    {
        if(this.state.arr)
        {
         x  =this.state.arr.map((item,index)=>{
             return (
                 <Display key={index}
                  temp={item.main.temp}
                 />
             )
         })
        }
      
        
        return(
            <div>
                {x}
            </div>
        )
    }
}

export default First;