How to add data-* attribute to IButtonProps

[kmkaliraj]

Hi,

I'm trying send data attributes along with IButtonProps.
buttonProps={{
id: StudioTourHooks.NEW_TABLE_BUTTON,
text: formatMessage({ id: LocalizationConstant.TABLE }),
onClick: AddTableButtonClick,
ariaLabel: formatMessage({ id: LocalizationConstant.ADD_TABLE_BUTTON_ARIA_LABEL }),
iconProps: { iconName: IconNames.Add },
[data-testid]: {dataWorkspace.panel.addNewTable},
}}

Gettig this following error.

Object literal may only specify known properties, and '[data-testid]' does not exist in type 'IButtonProps'.ts(2322)

[smhigley]

This is because the type React.AllHTMLAttributes does not include data-* attributes. A workaround would be something like this:

// explicitly typed for the data- attribute, without sacrificing type safety for the other button props
const buttonData = { 'data-testid': dataWorkspace.panel.addNewTable } as IButtonProps;

buttonProps={{
  id: StudioTourHooks.NEW_TABLE_BUTTON,
  text: formatMessage({ id: LocalizationConstant.TABLE }),
  onClick: AddTableButtonClick,
  ariaLabel: formatMessage({ id: LocalizationConstant.ADD_TABLE_BUTTON_ARIA_LABEL }),
  iconProps: { iconName: IconNames.Add },
  ...buttonData
}}

Hope that helps!

[maralihart]

How would you then utilize that data in the onClick function?