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>
        );
    }
    ...

results matching ""

    No results matching ""