[Solved]-How do I re render the entire React Pivot Table UI component when I change the selection in select tag?-Reactjs

working code sandbox

there were two problems;

1. s => this.setstate(s) in your pivottable's onchange property. this overrides root state with all the props of your pivottable. when your page initiated, container's (grid) state only contains selectedoption:"region" but after interacting with the pivottable, container has receives all the props of the pivottable. screenshot:

2. {...this.state} prop in pivottableui component, passes all keys as props in container's state including data.(as seen in the screenshot above). and this overrides data property, data={datadic[this.state.selectedoption]} after this, changes to selectedoption state does not re-render pivottableui

solution

1. change s => this.setstate(s) with this.setstate({ pivottableuiconfig: s });

2. define a pivottableuiconfig variable which does not include data property. (used es7 object rest operator to omit data property)

   // picking all the properties except "data" const { data, ...pivottableuiconfig } = this.state.pivottableuiconfig;

3. change {...this.state} with {...pivottableuiconfig}

encountered the same problem and found a simple fix. the problem is that data prop always gets overwritten by {...state}. hence we can assign data to state before passing it to pivottableui. and the data prop is no longer needed.

const state = {...this.state};
state['data'] = datadic[this.state.selectedoption];
return (
  <pivottableui
      onchange={s => this.setstate(s)}
      {...state}
  />
)

you should add

 renderers={{ ...tablerenderers, ...plotlyrenderers }}
                            {...state}

to your pivottableui, see the full example:

import tablerenderers from 'react-pivottable/tablerenderers';
import pivottableui from 'react-pivottable/pivottableui';
import plot from 'react-plotly.js';
import createplotlyrenderers from 'react-pivottable/plotlyrenderers';
import 'react-pivottable/pivottable.css';

const plotlyrenderers = createplotlyrenderers(plot);


function dataexploration() {

    const { dashboarddata: { data } } = useselector((state) => state.dashboarddata)
    
    const expcomp = (props) => {
        const [state, setstate] = usestate(props);
        return (
            <div classname="row">
                <div classname="col-md-12">
                    {
                        <pivottableui
                            style={
                                {
                                    width: "100%",
                                    height: "100%"
                                }
                            }
                            onchange={(s) => setstate(s)}
                            renderers={{ ...tablerenderers, ...plotlyrenderers }}
                            {...state}
                        />

                    }
                </div>
            </div>
        )
    }
    return (

        <expcomp data={data} />
    )
}

from more details check the doc: https://github.com/plotly/react-pivottable

i found that if i delete the data property from s

<pivottableui
  data = {[{}]}
  onchange={ s =>{ 
    delete s.data
    this.setstate(s)
  }}
  {...this.state}
/>

this won't overwrite the data in the parent class and will be automatically rendered with updated data