title: How do I re render the entire React Pivot Table UI component when I change the selection in select tag?
body: <p>I am new to react js and I am trying to create a pivot table using React Pivot table. I want to be able to select a data set using a select drop down menu and update the state and re render the full table whenever there is a change in the drop down selection just like the jquery example shown here <a href="https://pivottable.js.org/examples/rcsvs.html" rel="nofollow noreferrer">https://pivottable.js.org/examples/rcsvs.html</a></p>
  
  <p>It works before I make any selections or changes to the Pivot Table. I am able to toggle between the 2 datasets and the state changes in the Pivot table. But when I select a pivot dimension and use the pivot table, after that point, changing the select menu does not help me change the pivot table's state. Please help.</p>
  
  <p>Here's my code.</p>
  
  <pre><code>import React from 'react';
  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';
  
  
  // create Plotly renderers via dependency injection
  const PlotlyRenderers = createPlotlyRenderers(Plot);
  
  
  
  const data1 = [{'Country':'USA','Sales':45000}, 
  {'Country':'USA','Sales':50000},{'Country':'CA','Sales':15000}]
  
  const data2 = [{'Product':'Sofa','Sales':5000},{'Product':'Dinner 
  Table','Sales':50000},{'Product':'Chair','Sales':15000}]
  
  const dataDic = {'Region':data1,'Products':data2}
  
  
  
  class App extends React.Component {
  
  
  constructor(props) {
    super(props);
    this.state = {selectedOption: 'Region'};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    this.setState({selectedOption: event.target.value});
  
  }
  
  
  handleSubmit(event) {
    alert('You have selected ' + this.state.selectedOption);
    event.preventDefault();
  }
  
  
  render() { 
  
  
      return &lt;div&gt;
                &lt;select defaultValue="Region" onChange={(e)=&gt;   
   this.handleChange(e)}&gt;
                      &lt;option  value="Region"&gt;Region&lt;/option&gt;
                      &lt;option value="Products"&gt;Products&lt;/option&gt;
                &lt;/select&gt;
                &lt;br/&gt;
                &lt;br/&gt;
  
                &lt;PivotTableUI
                    data={dataDic[this.state.selectedOption]}
                    onChange={s =&gt; this.setState(s)}
  
             renderers={Object.assign({},TableRenderers)}//,PlotlyRenderers)}
                    {...this.state}
                /&gt;
  
              &lt;/div&gt;;
       }
   }
  
  
  
  export default App;
  </code></pre>