Maintain the state of the pivot table even after refreshing in react ?

[Private-SO]

Hi Guys,

It is a Question.

Basically i want to main the state of the component even after refreshing. Here is my code

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

const PlotlyRenderers = createPlotlyRenderers(Plot);

class App extends Component {
  state = {
    pivotState: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart',
  plotlyOptions: {width: 500, height: 500}
  }
  };

 handleClick = () => {
                this.setState(
                  {
                    pivotState: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart',
                  plotlyOptions: {width: 600, height: 500}
                  }
                  });
        }

    componentDidMount() {
           console.log("Hi guys")
          }

render() {
    //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTable
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState}
            />

      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}

export default App;

My tips data file

  ["Total Bill","Tip","Payer Gender","Payer Smoker","Day of Week","Meal","Party Size"],
    [16.99,1.01,"Female","Non-Smoker","Sunday","Dinner",2],
    [10.34,1.66,"Male","Non-Smoker","Sunday","Dinner",3],
    [21.01,3.5,"Male","Non-Smoker","Sunday","Dinner",3],
    [23.68,3.31,"Male","Non-Smoker","Sunday","Dinner",2],
    [24.59,3.61,"Female","Non-Smoker","Sunday","Dinner",4],
    [25.29,4.71,"Male","Non-Smoker","Sunday","Dinner",4] ]

Above code will show me the empty graph in the DOM first and after hitting button it will render the results. These results are perishing after refresh but i want to retain same state even after refresh . The update should happen only after i hit the Button.

I had googled for this they say i need to use localstorage for this. But even in localstorage i need to pass the state as JSON.stringify something like this JSON.parse( localStorage.getItem( "pivotstate" ) ); i dont know how to pass pivotstate here.

Any help is appreciated. Thanks

[nicolaskruchten]

when you say "refreshing" you mean hitting "reload" in the browser such that the whole page refreshes?

[Private-SO]

Yeah hitting "reload" in the browser.

[nicolaskruchten]

OK. This kind of thing is pretty far out of scope of this pivot table component and gets into general-purpose javascript application development, which isn't really the type of question I can help with in this repo, sorry :)