import React, { useState, useEffect, useRef } from 'react';
import $ from 'jquery';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.min.css';
import { itemsServices } from '../../services';
import noImage from '../../assets/img/noimage.png';
import Checks from '../../components/bootstrap/forms/Checks';

const DataTable = ({restaurantId}) => {
  const [data, setData] = useState([]);
  const dataTableRef = useRef(null);
  const handleButtonClick = (id) => {
    console.log(`Button clicked for row with ID ${id}`);
    // do something with the row ID
  };
  useEffect(() => {
    const getAllItemsByRestId = () => {     
      itemsServices.getAllItemsByRestId(restaurantId)
        .then((data) => {
          console.log('getAllItemsByRestId=>',data);        
          const newArray = data.results.data.map((item) => {
            let category = '';
            if (item.subcategoryId != null) {
              if (item.subcategory != null && item.subcategory.category != null) {
                category = item.subcategory.category.title;
              }
            } else {
              if (item.categories != null && item.categories.length > 0) {
                category = item.categories[0].title;
              }
            }
            return {
              id:item.id,
              itemImage: '<img src="' + (item.itemImage!=null?process.env.REACT_APP_PUB_URL+'/'+item.itemImage:noImage) + '" width="60" height="60"/>',
              name: item.name,
              description: item.description,
              category: category,
              itemPrice: item.itemPrice,
              isActive: item.isActive?'Active':'Disabled'
            };
          });
          setData(newArray);    
          console.log('newArray=>',newArray)
        })
        /*.catch((error)=>{
          showNotification('Error',error,'danger');
        });*/ 
    }
    getAllItemsByRestId();
  }, []);

  useEffect(() => {
    if ($.fn.DataTable.isDataTable(dataTableRef.current)) {
      $(dataTableRef.current).DataTable().destroy();
    }
    $(dataTableRef.current).DataTable({
      data: data,
      columns: [
        {
          title: 'id',
          data: 'id',
          orderable: false,
          visible: false
        },
        {
          title: 'Image',
          data: 'itemImage',
          orderable: false           
        },
        { title: 'Name', data: 'name' },
        { title: 'Description', data: 'description', orderable: false },
        { title: 'Category', data: 'category' },
        { title: 'Price', data: 'itemPrice' },
        {
          title: 'Status',
          data: 'isActive',         
        },
        {
          title: 'Status',
          data: null,
          render: (data, type, row, meta) => {
            return type === 'display' ?
              `<button onClick="handleButtonClick(${row.id})">Click me</button>` :
              data;
          }
        }
        
      ],
    });
  }, [data]);

  
  return (
    <div>
      <table ref={dataTableRef} className="display" width="100%" />
    </div>
  );
};

export default DataTable;

getting error caught ReferenceError: handleButtonClick is not defined. Please help

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide