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
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.
Yes, you can pass data directly to another component, I am supposing that your reducer part is working fine and you are getting data in data.js, here is what your code will look like
//Chart.js
import React, { Component } from 'react';
import PropTypes from "prop-types";
import ChartBar from './ChartBar.js';
//import Data from './Data.js'; //No need to import here
export default class Chart extends Component{
static propsTypes = {
data: PropTypes.array.isRequired
};
render(){
return
<div className="chart">
<ChartBar data={this.props.data}/>
</div>
);
}
}
and your Data file will look like this,
//Data.js
import React,{ Component } from 'react'
import { connect } from 'react-redux';
import raws from './another.json';
import Chart from './Chart'; //fix the path to Chart.js if that file is not in same folder.
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}
{ //instead use <Chart /> here and pass data_pie as prop }
<Chart data={data_pie} />
</div>
)
}
}
function mapStateToProps(state) {
return {
apple:state.apple,
lemon:state.lemon,
};
}
export default connect(mapStateToProps)(Data);