Getting TypeError: this.props.aggregators[this.props.aggregatorName] when reloading the PivotUI ?

[Private-SO]

Hi

Here is my code

import React, { Component } from 'react';
import tips from './tips';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

const PlotlyRenderers = createPlotlyRenderers(Plot);

function isDiff(a,b) {
  return JSON.stringify(a) !== JSON.stringify(b);
}
class App extends Component {
  state = {
    pivotState5: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart'
      }
  };

 handleClick = () => {
                this.setState(
                  {
                    pivotState5: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart'                  
                    } 
                  }
                  );
                  
        }
        
        componentDidMount() {
          let state = JSON.parse(localStorage.getItem('pivotState5'));
          this.setState(state);
          console.log(this.state);
          console.log("inside didmount");
        }
        
        
        componentDidUpdate(prevProps, prevState) {
        
          if (isDiff(this.state, prevState)) {
            localStorage.setItem('pivotState5', JSON.stringify(this.state));
            console.log(this.state);
            console.log("inside didupdate");
            // localStorage.clear();
            // console.log("localstorage cleared");
          }
        
        }
      
render() {
  //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTableUI
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState5: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState5}
            />
            
            
      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}

export default App;

Here is my tips.js

export default [
    ["Total Bill","Tip","Payer Gender","Payer Smoker","Day of Week","Meal","Party Size"],
    [16.99,1.01,"Athelete","Non-Smoker","Sunday","Dinner",2]
    ];

I am getting error like this

TypeError: this.props.aggregators[this.props.aggregatorName] is not a function

And both the states like the state from the database is identical to the one that I had before reloading the app .

I already check this https://github.com/plotly/react-pivottable/issues/20 issue.

In that question he said he is saving the attributes

['data', 'rows', 'cols', 'aggregatorName', 'vals', 'rendererName', 'sorters', 'plotlyOptions']

I am too doing the same thing in the state. But getting the same error. Usually aggregators takes key which is aggregatorName that I am providing.

Any help is appreciated

Thanks

[KaranChe97]

@Private-SO I know it's been a long. But have you managed to solve this? I am also facing this issue.