`import React, {Component} from "react";
import {connect} from "react-redux";
import {Sparklines, SparklinesLine} from 'react-sparklines';
class WeatherList extends Component {
renderWeather(cityData) {
/* if(typeof cityData==='undefined'){
return cityData
} */
const name=cityData.city.name;
const temps =cityData.list.map(weather=> weather.main.temp);
return (
<tr key={name}>
<td>{name}</td>
<td>
<Sparklines height={120} width={100} data={temps}>
<SparklinesLine color="green"/>
</Sparklines>
</td>
</tr>
);
}
render() {
return (
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
{ this .props.weather.map(this.renderWeather)}
</tbody>
</table>
);
}
}
function mapStateToProps({weather}) {
return
{ weather }; // {weather}== {weather: weather}
}
export default connect(mapStateToProps)(WeatherList);`