I am learning some React and Redux. I have a function that returns an array of people in another file called persons_list.js. It looks like this.
export default function() {
return [
{
"name": "Michael Smith",
"age": 40,
"location": "New York",
"salary": 80000
}
]
}
I want to pass the salary data into a Sparklines component to create a graph.
import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Sparklines, SparklinesLine } from 'react-sparklines';
class PersonList extends Component {
personsData = {
}
render() {
return (
<Sparklines height={120} width={180} data={personsData}>
<SparklinesLine color="red" />
</Sparklines>
)
}
}
function mapStateToProps(state) {
return {
persons: state.person
}
}
export default connect(mapStateToProps)(PersonList);
I'm having trouble getting the salary data and passing it to the component.
You could try this:
...
render(){
// Create an array and populate it with salary value in all the
// objects in this.props.persons array
const personsData = [];
this.props.persons.forEach(person => personsData.push(person.salary));
return (
<Sparklines height={120} width={180} data={personsData}>
<SparklinesLine color="red" />
<Sparklines>
);
}
...
I haven't tested this code. But it should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.