getting error caught ReferenceError: handleButtonClick is not defined

ganeshg17

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

colin

I'm not clear what those useEffect groupings are, but given the table is defined in a different one to the declaration of handleButtonClick() I can see that causing a scoping issue. Try moving handleButtonClick() into the same block as the table initialisation.

Colin

allan

Actually I think this is more involved. You are attempting to use a React event handler from a rendering function, as if there return was JSX. That is not possible in DataTables - sorry.

You would need a global event handler (or at least at the component level) that would listen for the click event and then act on it.

Better integration with React is something I plan to look at in future.

Allan