Is there any way to build a dynamic BuyButton with a variable number of data-item-custom[x] fields?

Support
#1

Hi! I’m trying to build a flexible Gatsby template for eCommerce sites. To make it work with Snipcart, I need a BuyButton that can vary its data-item-custom[x] fields based on a GraphQL pull. So far I can’t find a way to make that work.

The problem I’m running into is that the BuyButton accepts variables on the right side of the equals sign just fine, but only accepts hard-coded values on the left side of the equals sign. So this works:

<BuyButton
...
data-item-custom1-name={item.modifierArray[0].name}
...
>

But this doesn’t:

const exampleVar = "data-item-custom1-name";
<BuyButton
...
{exampleVar}={item.ModifierArray[0].name}
...
>

Is this possible right now in Snipcart?

Related: I tried calling BuyButton as a function call and then building out the logic in a separate function, but either Gatsby or Snipcart won’t let me do that; it breaks in a way that I find weird and opaque. BuyButton only works when built in the main return() call for the default function.
Edit: I realized I should include an example of this. This works:

export default function ItemPageTemplate({data}) {
...
return(
...
<BuyButton
...
>
);
}

This doesn’t work:

export default function ItemTemplatePage{

function BuyButton({ item }) {
return (
<BuyButton
...
>
);
}

// Here's the return statement for ItemPageTemplate,
// where we call the function <BuyButton>:
return(
...
<BuyButton item={item} />
...
);
}

Thanks for your time!

#2

From your example:

BuyButton
...
data-item-custom1-name={item.modifierArray[0].name}
...
>

I think what you’re trying to do can be accomplished by using the spread operator:

<BuyButton {...YourAttributes} />

where YourAttributes is an object structured like:

{
    [exampleVariable]: item.ModifierArray[0].name
}

(the key name must be in brackets to be evaluated as a variable)