Rendering correct data from json api using ReactJS

Had a look at the demo, but it (still) does not work. This is the output I get:

Looks like your code needs 2 fixes:

1. You call setState() twice in the same function, and you have other code after setState(). Since setting state causes re-render, you should a) only call it once inside a block/ function and b) call it only at the end of the block/ function.
2. Better to put the async call and the handling of the response in different functions.

So I would change code as follows:

...
function getWeatherRequestListener( e ) {
  weatherData                             = JSON.parse(this.responseText);
  weatherDataCityName                     = weatherData.city.name;
  ...
  weatherDataCityHumidity                 = weatherData.list[0].humidity;

  this.setState({                                     // Update in response handler: you have the results, so you should re-render here
    longitude: weatherDataCityCoordinateLongitude,
    latitude: weatherDataCityCoordinateLatitude,
    name: weatherDataCityName,
    country: weatherDataCityCountry,
    placeName: event.target.value,
    showDetails: true                                 // and you know here you have details, so include them in state
  });
}
...
inputHandleChange: function( event ) {
  if ( event.target.value.trim().length > 0 ) {
    // if we have a valid input, then we send off request
    var getWeatherRequest             = new XMLHttpRequest();
    ...
    getWeatherRequest.send();
  }
  this.setState({ showDetails :false });             // and we always hide the details while we wait for correct response
},