For example we have a component, which represents the table:
// src/containers/weather_list.js
import React, { Component } from 'react';
import {connect} from 'react-redux'
class WeatherList extends Component {
render() {
return(
<table className="table table-hover">
<thead>
<tr>
<th>City</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
);
}
}
function mapStateToProps({weather}) {
return {weather}
}
export default connect(mapStateToProps)(WeatherList)
For example, we have a such data:
{
"cod":"200",
"message":0.0025,
"cnt":37,
"list":[
{
"dt":1501405200,
"main":{
"temp":295.25,
"temp_min":295.25,
"temp_max":297.101,
"pressure":999.23,
"sea_level":1018.31,
"grnd_level":999.23,
"humidity":70,
"temp_kf":-1.85
},
"weather":[
{
"id":500,
"main":"Rain",
"description":"light rain",
"icon":"10d"
}
],
"clouds":{
"all":80
},
"wind":{
"speed":5.38,
"deg":127.503
},
"rain":{
"3h":0.055
},
"sys":{
"pod":"d"
},
"dt_txt":"2017-07-30 09:00:00"
},
...
"city":{
"id":524901,
"name":"Moscow",
"coord":{
"lat":55.7522,
"lon":37.6156
},
"country":"RU"
}
}
Let's place the function call in the place, where we are going to represent the piece of data:
// src/containers/weather_list.js
...
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>
);
}
...
And now let's implement the function we've passed there:
// src/containers/weather_list.js
...
renderWeather(cityData){
return (
<tr>
<td>{cityData.city.name}</td>
</tr>
);
}
...
Also, don't forget to set key to each element, to avoid errors:
// src/containers/weather_list.js
...
renderWeather(cityData){
const name = cityData.city.name;
return (
<tr key={name}>
<td>{name}</td>
</tr>
);
}
...