Getting data from openweather API in React - reactjs

Question

I am trying to write a program that takes names of 2 cities as an input, and then gets the temperature in the 2 cities using the openweathermap API. However, I am unable to call the API. I tried following some tutorials but it is a bit confusing. I would be glad if someone could help me with connecting to the API, and getting the temperature for the cities, and print them on screen.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import _ from 'lodash';
import Request from 'superagent';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {input1: '', input2: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({[event.target.name]: event.target.value});
}
componentDidMount(){
var city1 = this.state.input1;
var url= 'http://api.openweathermap.org/data/2.5/weather?q={city1}&units=metric&APPID=83c6ba4dd07d83514536821a8a51d6d5';
Request.get(url).then((response) => {
this.setState({
report: response.body.Search
});
});
}
handleSubmit(event) {
var temperature = _.map(this.state.report, (city) => {
return (<p>{city.main.temp}</p>);
});
event.preventDefault();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
<div className="container">
<h1>Where Should I go?</h1>
<form onSubmit={this.handleSubmit}>
<div className="cityboxdiv">
<input name="input1" type="text" id="tb1" className="citybox" onChange={this.handleChange} placeholder="Enter City1" autoFocus />
<input name="input2" type="text" id="tb2" className="citybox" onChange={this.handleChange} placeholder="Enter City2"/>
</div>
<div className="btn-div">
<button type="submit" className="sub-btn">Tell Me!</button>
</div>
</form>
</div>
</div>
);
}
}
export default App;
Two things I would like to know are how to pass the city names into the url so that we can get the data. And once we get the data, how can I display only the temperature values of the cities.

Answer 1

I see you make several mistakes.
Request to API and put data to state you should make inside handleSubmit (or better use actions).
In render method you should output your state data as state.report.map(item => (<div>{city.main.temp}</div>))
Generate url you can make using template string (https://learn.microsoft.com/en-us/scripting/javascript/advanced/template-strings-javascript)