We have a class:

import React from 'react';
import {Component} from 'react'
import {connect} from 'react-redux'
import {Sparklines, SparklinesLine} from "react-sparklines";


class WeatherList extends Component {
    renderWeather(cityData){
        const name = cityData.city.name;
        const temps = cityData.list.map(weather => weather.main.temp);
        console.log(temps);
        return (
            <tr key={name}>
                <td>{name}</td>
                <td>
                    <Sparklines data={temps} width={180} height={180}>
                        <SparklinesLine color="orange"/>
                    </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}
}

export default connect(mapStateToProps)(WeatherList)

We could separate Sparklines to another component:

 import React from 'react'
import {Sparklines, SparklinesLine} from "react-sparklines";


export default (props) => {
    return(
        <div>
            <Sparklines data={props.data} width={180} height={180}>
                <SparklinesLine color={props.color}/>
            </Sparklines>
        </div>
    );
}

And import data to it from container:

...
import Chart from '../components/chart'


class WeatherList extends Component {
    renderWeather(cityData){
        ...
        return (
            <tr key={name}>
                <td>{name}</td>
                <td>
                    <Chart data={temps} color="orange"/>
                </td>
            </tr>
        );
    }

    ...

results matching ""

    No results matching ""