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