Updates from server not reflected in spreadsheet component

Question

I have a server publishing updates with SSE for data displayed in the spreadsheet. Rows are unique by id ( see below ). If a new event arrives the event is pushed to the data array and is displayed correctly in the spreadsheet. When an update arrives for an event with existing ID updating the event in the data array does not trigger the spreadsheet to show the update. Please provide guidance. Thank you

I have the following code:

const [data, setData] = useState([]);

const update = (event: any) => {

  console.log("received event: ", event);
  const index = data.findIndex((el) => el.id === event.id);

  if(index !== -1 ) {
    data[index] = event;
  }
  else
    data.push(event);

  setData([...data]);
};

const eventSource = new EventSource("http://localhost:8080/api/consume");
eventSource.onmessage = e => updateMarkets(JSON.parse(e.data));

<SpreadsheetComponent ref={sheetRef}>
  <SheetsDirective>
    <SheetDirective name='Test'>
      <RangesDirective>
        <RangeDirective dataSource={data} showFieldAsHeader={false} startCell='A1'/>
      </RangesDirective>
    </SheetDirective>
  </SheetsDirective>
</SpreadsheetComponent>

Sangeetha Priya Murugan · Accepted Answer

Hi Dimiter, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported issue and the datasource updated properly while changing the data dynaically. For your convenience, we have prepared the sample based on your requirement please find the link below. 
 
https://stackblitz.com/edit/react-5zu8yr-1ffuzm?file=index.js  
 
Could you please check the above sample and replicate your issue in the above sample and get back to us, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M