App development - Linking a shortcut Action on a ResourceItem to a functional component in React

Technical Q&A
1

Hi friends !

I recently started an app project, and am stuck with a React issue that I would like to discuss with you.

Basically my component is the below one (simplified) : this module displays a list of products in my store with a bulk action button and a shortcut action button.

The problem is that when I define an action for the shortcutAction button (with the below line) nothing happens and the corresponding functional component ‘handleShortcutAction’ is not called.

const shortcutActions = 
        { content: "Update Description", 
          onAction: () => 

It might seem like a dummy React mistake, but I can't see why it doesn't work properly. Below is the full simplified code for reference, with the functional component at the end.

Thanks a lot guys !

```javascript
// GraphQL query that updates products by ID
const UPDATE_DESC= gql`
mutation productUpdate($input:ProductInput!) {
    productUpdate(input:$input)
    {
      userErrors{
        field
        message
      }
      product {
        descriptionHtml
      }
    }
  }
`;

function ResourceListWithProductsAndActions(){
  const { data, loading, error, refetch } = useQuery(GET_PRODUCTS_BY_ID);

  const [selectedItems,setSelectedItems] = useState(undefined);
  useEffect(()=> {
    if(loading === false && data){
      setSelectedItems([]);
    }
  },[loading,data])

  if (loading) return Loading…

  if (error) return {error.message}

  const items = data.products.edges;
  const resourceName = { singular: 'Product', plural:  'Products' };
  
  const promotedBulkActions = [
    {
      content: 'Update Description',
      onAction: () => (