Passing data into React component

Question

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.

Your person_list.js is wired up as a reducer? – Steven Daniel Anderson Feb 21 '18 at 08:51 — Steven Daniel Anderson, Feb 21 '18 at 08:51

Ishwor Timilsina · Answer 1 · 2018-02-20T18:54:08.003

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.

Passing data into React component

1 Answers1