CODEWITHSUNDEEP
javascriptarraysfunctionreactjs
Dana Chen
Dana Chen

Reputation: 216

Can I export data to another react component?

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

Upvotes: 3

Views: 4603

Answers (2)

Afzal Ahmad
Afzal Ahmad

Reputation: 626

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

Upvotes: 1

skAstro
skAstro

Reputation: 374

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.

Upvotes: 1

Related Questions