CODEWITHSUNDEEP
reactjsapi
paula
paula

Reputation: 264

componentDidMount not rendering everything

I am practicing react (new to react) and I am doing a clone of momentum chrome plugin. So far the app renders the quote, current temperature where I live (by calling API) and a random wallpaper using unsplash API. The issue is with componentDidMount - the first componentDidMount doesn't work -> componentDidMount() { this.getWeather(); } but if I move it to after the last componentDidMount it works but then again the first componentDidMount won't work. I would appreciate any help. 

import React, {Component} from 'react';
import './App.css';

class Quote extends React.Component {
  constructor() {
    super();
    this.state = {
      quote: "",
      city: "",
      temp: 0
    }
    this.handleClick = this.handleClick.bind(this);
    this.handleImg = this.handleImg.bind(this);
    this.getWeather = this.getWeather.bind(this);
  }

  handleClick() {
  console.log("click");
    fetch("https://andruxnet-random-famous-quotes.p.rapidapi.com/?cat=famous&count=10", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "andruxnet-random-famous-quotes.p.rapidapi.com",
        "x-rapidapi-key": "7899000000a915b762cp16cb04jsn76a3bf17ed18"
    }
    })
    .then(response => response.json())
    .then(data => {
      console.log(data[0]);
     this.setState({quote: data[0]["quote"]});
    })
    .catch(err => {
    console.log(err);
    });
    console.log(this.state.quote);
  }

//
getWeather() {
  const x = -33.791202399999996;
  const y = 151.2870279;
  const apiKey = '0c1fc18fa920390132090e';
  var url = `http://api.openweathermap.org/data/2.5/forecast?lat=${x}&lon=${y}&APPID=${apiKey}`;
// additional code


  fetch(url).then(response => response.json()).then(data=> {
    this.setState({city: data['city']['name']});
    this.setState({temp: data['list'][0]['main']['temp']});
  });


};

  handleImg() {
    fetch(`https://source.unsplash.com/1800x950/?wallpapers`).then((response)=> {
  document.body.style.backgroundImage = `url(${response.url})`
  });
  }

// this.getWeather(-33,151);
componentDidMount() {
  this.getWeather();
}

  componentDidMount() {
    this.handleClick();
  }

  componentDidMount() {
    this.handleImg();
  }


  render() {
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes();
    const weather = Math.round(this.state.temp - 273);
    console.log(weather);
  return (
    <div>
      <p> {this.state.city}</p>
      <p> {weather}<sup>O</sup>C</p>
      <div className="button">
        <div className="button__random">
          <div>  {time}</div>
          <hr/>
          <button onClick={this.handleClick}> New Quote</button>
          <p> {this.state.quote}</p>
        </div>
      </div>
    </div>
  );
}
}

export default Quote;

Upvotes: 0

Views: 53

Answers (1)

Chris Walker
Chris Walker

Reputation: 96

Just have one function componentDidMount(), like:

componentDidMount() {
  this.getWeather();
  this.handleClick();
  this.handleImg();
}

Upvotes: 2

Related Questions