Dynamically update react-google-chart type

Question

I want to use a select box to change the chart type of a react-google-chart. Code looks like this:

const GoogleGraph = ({chartType, handleChartTypeChange}) => (
        <section>
            <Selector
                chartType={chartType}
                handleChartTypeChange={handleChartTypeChange}
            />
            <Chart
                chartType={chartType}
                data={data}
                options={options}
                graphID={chartType}
                width="100%"
                height="10em"
                chartEvents={chartEvents}
            />
        </section>
    );

When the select box is changed I am getting the data I expect as I can see in the debugger that the chartType prop has changed from "Bar" to "Line" however the chart remains a bar chart after render completes. I do not get an error.

Is it possible to update the chartType dynamically?

Answer 1

If all else fails, you can also use the chartType as key which will make React throw away the current component and create an entirely new one when the chartType changes.

const GoogleGraph = ({ chartType, handleChartTypeChange }) => (
  <section>
    <Selector
      chartType={chartType}
      handleChartTypeChange={handleChartTypeChange}
    />
    <Chart
      key={chartType}
      chartType={chartType}
      data={data}
      options={options}
      graphID={chartType}
      width="100%"
      height="10em"
      chartEvents={chartEvents}
    />
  </section>
);