Template fields are getting empty whenever state changes

[Emrah]

Hello, I've a very basit DataGrid with local data which has a template column like this:

If I make any state update then the template column values are getting empty like this:

Codes are here:

import React, { useState } from "react";

import {

  ColumnDirective,

  ColumnsDirective,

  GridComponent,

} from "@syncfusion/ej2-react-grids";

import "./App.css";

import { ExcelExport, Inject, Toolbar } from "@syncfusion/ej2-react-grids";

const DataGrid = (props) => {

  const data = [

    {

      OrderID: 10248,

      CustomerID: "VINET",

      EmployeeID: 5,

      OrderDate: new Date(8364186e5),

      ShipName: "Filiz Sarı Çelebi",

      ShipCity: "Reims",

      ShipAddress: "59 rue de l Abbaye",

      ShipRegion: "CJ",

      ShipPostalCode: "51100",

      ShipCountry: "France",

      Freight: 32.38,

      Verified: !0,

    },

    {

      OrderID: 10249,

      CustomerID: "TOMSP",

      EmployeeID: 6,

      OrderDate: new Date(836505e6),

      ShipName: "Emrah Çelebi",

      ShipCity: "İzmir",

      ShipAddress: "Luisenstr. 48",

      ShipRegion: "CJ",

      ShipPostalCode: "44087",

      ShipCountry: "Germany",

      Freight: 11.61,

      Verified: !1,

    },

    {

      OrderID: 10250,

      CustomerID: "HANAR",

      EmployeeID: 4,

      OrderDate: new Date(8367642e5),

      ShipName: "Hanari Carnes",

      ShipCity: "Rio de Janeiro",

      ShipAddress: "Rua do Paço, 67",

      ShipRegion: "RJ",

      ShipPostalCode: "05454-876",

      ShipCountry: "Brazil",

      Freight: 65.83,

      Verified: !0,

    },

  ];

  const [counter, setCounter] = useState(0);

  const template = () => {

    return (

      <div>

        <input type="button" value="test" />

      </div>

    );

  };

  return (

    <>

      <GridComponent id="grid" dataSource={data} height={150}>

        <Inject services={[Toolbar, ExcelExport]} />

        <ColumnsDirective>

          <ColumnDirective field="OrderID" width="100" textAlign="Right" />

          <ColumnDirective field="ShipCity" width="100" />

          <ColumnDirective field="EmployeeID" width="100" textAlign="Right" />

          <ColumnDirective

            field="Freight"

            width="100"

            format="C2"

            textAlign="Right"

          />

          <ColumnDirective field="ShipName" width="100" template={template} />

        </ColumnsDirective>

      </GridComponent>

      <div style={{ width: "100%", textAlign: "center" }}>

        Counter:{counter}

        <input

          type="button"

          onClick={() => setCounter(counter + 1)}

          value="+"

        />

      </div>

    </>

  );

};

export default DataGrid;

Any ideas?

[Rajapandiyan Settu]

Hi Emrah,

Thanks for contacting Syncfusion support.

By default, when changing the state value, the react component automatically gets refreshed and this is the default behavior. When clicking the button, you are changing the state value and it refreshes the react component (template function).

We suggest you to define the columnTemplate function with useCallback hook to resolve this problem.

https://www.geeksforgeeks.org/react-js-usecallback-hook/

 

[index.js]

import { useEffect, useState, useCallback } from 'react';

 

  const template = useCallback(() => {

    //console.log(args, "Args");

    return <div> template text</div>;

  }, []);

 

Sample: https://stackblitz.com/edit/react-qwhc82?file=index.js

Regards,

Rajapandiyan S