ReactJS not working in codepen

Question

const api_key ='09e33ec3a8beb8e071a993a59de37c17';

class WeatherApp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      city: 'Dhaka',
      description: ''
    }
  }

  componentDidMount(){
    this.grabWeather(this.state.city);
  }

  grabWeather(city){
    fetch(`http://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city}`)
    .then(response => response.json())
    .then(json => {
      this.setState({description: json.weather[0].description})
    });
    console.log("working");
  }

  render(){
    return(
      <div>
        <h1>Today's Weather</h1>
        <h2>City: { this.state.city }</h2>
        <h2>Description: {this.state.description}</h2>
      </div>
    );
  }
}

ReactDOM.render(<WeatherApp />,
document.getElementById("app"));

I have added Babel as the pre-processor and added React and ReactDOM from the quick-add. I can see the output when I put it in jsbin but not in codepen. Can anybody tell me what is wrong with it?

Here is the link.

is there something specific about codepen that you want to get running? what about codesandbox.io ? it was built with react in mind — azium
– azium, Commented Jun 16, 2018 at 21:33
Thanks for letting me know about codesandbox.io. It is going to be helpful. — imranfarid
– imranfarid, Commented Jun 18, 2018 at 7:36

user3210641 · Accepted Answer · 2018-06-16 22:07:04Z

1

Your fetch request is failing because you're trying to fetch data from website using HTTP on HTTPS website.

Just change the fetch URL from

http://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city}

to

https://api.openweathermap.org/data/2.5/weather?APPID=${api_key}&q=${city}

edited Jun 16, 2018 at 22:07

answered Jun 16, 2018 at 22:01

user3210641

1,6311 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS not working in codepen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related