NigeH
NigeH

Reputation: 55

React Google Chart Props not update callback function

I use the select event on google timeline to change the data and then send the data back to the conponent as a prop which detects the state change and redraws the chart. My issue is if i use the select event again the data in the callback function is the orginal data not the new data redrawn. data comes in on a prop and is used to redraw the Chart and get the individual chart item in the select event

import React, { useState, useEffect } from "react";
import { Chart } from "react-google-charts";
import EditBooking from "./EditBooking";

const TimeLine = ({ data, LoadTimeLine }) => {
  const [modalShow, setModalShow] = useState(false);
  const [chartData, setChartData] = useState([
    {
      day: "",
      name: "",
      color: "",
      start: "",
      end: "",
    },
  ]);

  const handleEvent = (booking) => {
    setChartData(booking);
    setModalShow(true);
  };
  const hideModal = () => {
    setModalShow(false);
  };
  const loadNewData = (booking) => {
    LoadTimeLine(booking);
  };
  let chartEvents = [
    {
      eventName: "select",
      callback({ chartWrapper }) {
        const selectedItems = chartWrapper.getChart().getSelection();

        if (selectedItems.length > 0) {
          const selectedItem = selectedItems[0];
          const row = selectedItem.row + 1;
          const dataPoint = data[row];
          let booking = [];
          booking.push({
            day: dataPoint[0],
            name: dataPoint[1],
            color: dataPoint[2],
            start: dataPoint[3],
            end: dataPoint[4],
          });

          handleEvent(booking);
        }
      },
    },
  ];

  return (
    <>
      <EditBooking
        modalShow={modalShow}
        hideModal={hideModal}
        chartData={chartData}
        loadNewData={loadNewData}
      ></EditBooking>
      <Chart
        chartType="Timeline"
        data={data}
        width="100%"
        height="400px"
        options={{
          timeline: {
            colorByRowLabel: true,
          },
        }}
        chartEvents={chartEvents}
      />
    </>
  );
};

export default TimeLine;

Upvotes: 0

Views: 30

Answers (0)

Related Questions