Can I export data to another react component?

Question

I get the redux value make a new array in Data.js,and I want to use the new array data to draw a chart in Chart.js

so...

How can I to pass the data_pie to Chart.js can I just export data_pie in Data.js?

There is a react component to get the data

//Chart.js

import ChartBar from './ChartBar.js';
import Data from './Data.js';

export default class Chart extends Component{   
render(){
        return
            <div className="chart">
              <ChartBar data={Data}/>
            </div>
        );   
    } }

And in data.js get some value from the redux

//Data.js
import React,{ Component } from 'react'
import { connect } from 'react-redux';
import raws from './another.json';

function filter_pie(apple,lemon){
   //...put raws and redux together to filter some array we need
  }
  return [newArray,pieName]
}

class Data extends Component {
  render () {
    const { props: { apple, lemon } } = this
    let data_pie = filter_pie( apple, lemon )
    return(
      <div>
        {data_pie} //can I put the data in there ? or I don't need to write any return in this js?
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    apple:state.apple,
    lemon:state.lemon,

  };
}

export default connect(mapStateToProps)(Data);

I have no idea how can I to pass the array data_pie to chart.js

Answer 1

If data is manipulated in Data.js it should be saved to the redux store using a action and reducer.

When you stored your data to the redux store just create another container component around Chart.js and use mapStateToProps() for the chart.