JavaScript class is not called and nothing happened

Question

I'm very new to JavaScript. I tried to use reactJS to learn a JavaScript. Here, I'm trying to develop a weather application using API. But that didn't work. Can I know what is wrong with that code.

class retrieveApi extends React.Component {
  constructor() {
    super();
    window.alert("here");
    this.state = {
      temp: "",
      ret: "",
    };
    var Http = new XMLHttpRequest();
    const url =
      "http://api.openweathermap.org/data/2.5/forecast?appid=API_KEY&q=california";
    Http.open("GET", url);
    Http.send();
    window.alert("here");
    Http.onreadystatechange = (e) => {
      if (Http.readyState == 4) {
        this.setState({
          ret: Http.responseText,
        });
        var obj = JSON.parse(this.state.ret);
        window.alert(obj.cod);
      }
    };
  }
  render() {
    return <p className="main-temp text-shadow">{this.state.temp}</p>;
  }
}

in my App() function I called that class like this.

return <div>
<retrieveApi></retrieveApi>
</div>

I called that class like tags. Is that right? Before I tried to create clock so I used the same so I used like this. If something is wrong please rectify it.

And When I used this things nothing shows up or changes. Please help me with it!

Answer 1

First make sure you're exporting your retrieveApi class and importing it properly in your app component. Assuming your app component is a functional one , this is the proper way to render a component :

return ( <div> <RetrieveApi></RetrieveApi></div> )

Notice the parantheses

Also like mentioned above , make sure to capitalize your class components. Change :

class RetrieveApi

instead of

class retrieveApi

Answer 2

I think you are not exporting your class retrieveApi. Export your class like that:

export default retrieveApi;

Answer 3

Name of the class should start with capital letter. It should be RetrieveApi.