Untitled

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState, useMemo, useCallback } from 'react';
import { Dropdown } from 'react-bootstrap';
import ReactDOM from 'react-dom';

interface DropdownCellRendererProps {
  onOptionSelected: (value: string) => void;
  options: string[];
}

// Memoized Dropdown Menu Component
const DropdownMenu = React.memo(({ options, onOptionSelected }: DropdownCellRendererProps) => {
  return (
    <Dropdown.Menu>
      {options.map((option, index) => (
        <Dropdown.Item key={index} onClick={() => onOptionSelected(option)}>
          {option}
        </Dropdown.Item>
      ))}
    </Dropdown.Menu>
  );
});

export const DropdownCellRenderer = ({ options, onOptionSelected }: DropdownCellRendererProps) => {
  const [show, setShow] = useState(false);

  // Memoize the dropdown menu
  const dropdownMenu = useMemo(
    () =>
      ReactDOM.createPortal(
        <DropdownMenu options={options} onOptionSelected={onOptionSelected} />,
        document.body
      ),
    [options, onOptionSelected]
  );

  const handleToggle = useCallback((isOpen: boolean) => setShow(isOpen), []);

  return (
    <Dropdown onToggle={handleToggle} align="end" className="noprint">
      <Dropdown.Toggle title="Actions">
        <FontAwesomeIcon icon={['fas', 'bars']} />
      </Dropdown.Toggle>
      {dropdownMenu}
    </Dropdown>
  );
};