CODEWITHSUNDEEP
javascriptreactjs
stone rock
stone rock

Reputation: 1953

How to use reduce() on props in reactjs?

I have made a parent component and child component (Piechart.js). I passed props from parent component to Piechart component like this ->

 <Pie batdata={this.props.BattingRecord}/>

Above code is in parent component. Now I want to extract data from props inside my Piechart component (which is child component).

When I try console.log(this.props) inside my Piechart component constructor function it shows JSON data in console. See screenshot below:

enter image description here

Now I want to get the how parameter inside dismissal see the screenshot above. I think I am not accessing props properly. So what I tried in Piechart component is as follows:

Piechart.jsx:

  import React, { Component } from 'react';

    const wickets = this.props.batdata.reduce( (a,{dismissal})  =>{  <--Getting error at this line
        if(!a[dismissal.how]){
            a[dismissal.how]=1;
        }else{
            a[dismissal.how]=a[dismissal.how] + 1;
        }
        return a; 
    }, {});


    console.log(wickets);

    const dismissals = Object.values(wickets);   

    const labels = Object.keys(wickets);  

    //console.log(dismissals);

    //console.log(labels);

class Pie extends Component {

  constructor(props){
    super(props);
    console.log(this.props)
  }

  componentDidMount(){
    const piechart = new Chartist.Pie('.ct-pie-chart', data, options, responsiveOptions);
  }

  render(){
    return(
      <div>
          <div className="col-md-3 col-xs-6 ct-pie-chart">
              {this.piechart}
          </div>
      </div>

    )}

}

export default Pie ;

For above code I am getting type error: TypeError: Cannot read property 'batdata' of undefined

Upvotes: 0

Views: 3003

Answers (2)

Code-Apprentice
Code-Apprentice

Reputation: 83527

The problem is that const wickets is assigned outside of a class which extends Component. You need to move this code inside a member function of class Pie. this.props will only be defined inside of a class which extends Component.

class Pie extends Component {
    ...
    componentDidMount(){
        const wickets = this.props.batdata.reduce( (a,{dismissal})  =>{
            if(!a[dismissal.how]){
                a[dismissal.how]=1;
            }else{
                a[dismissal.how]=a[dismissal.how] + 1;
            }
            return a; 
        }, {});
        // Now you can use the value of "wickets" however you wish in this function

    this.piechart = new Chartist.Pie('.ct-pie-chart', data, options, responsiveOptions);
}

Even after fixing this problem you are likely to encounter other problems with the pie chart library you are using. If it is intended for use within a React app, you are not rendering it in the correct way.

Upvotes: 2

Thai Duong Tran
Thai Duong Tran

Reputation: 2522

The problem lies in your Piechart component. The error is quite self-explaining, your this.props is undefined. Without Piechart component's code, the exact problem cannot be told, however, there are couple of common mistakes that can lead to this error:

  • you are trying to access the props inside an event listener which is not properly bound or

  • you are trying to access this.props inside a stateless functional component or

  • inside the component's constructor before super(props) is called.

Edited: You are accessing this.props our side a proper context, you might want to get some idea how this work in JS first: http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ .

To correct your component, you can move the reduce function inside your component class, you can put it inside componentDidMount method.

Upvotes: 1

Related Questions