React does not recognize `data-feedback-fish-*` prop on DOM element

[bflemi3]

@feedback-fish/react@1.2.1
react@17.0.1

Problem

The following error shows in the console for all data-feedback-fish attributes.

Warning: React does not recognize the data-feedback-fish-userId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase data-feedback-fish-userid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected Behavior

There should be no warnings or errors displayed in the console from @feedback-fish/react.

Actual Behavior

The console displays errors for each data-feedback-fish attribute.

[dferber90]

I have the same issue. Here is a simple reproduction:

<FeedbackFish
  projectId="x"
  userId="x"
  metadata={{ projectId: "bar" }}
>
  <button
    type="button"
  >
    Feedback
  </button>
</FeedbackFish>

The error is logged as soon as metadata is passed (I think).

[dpollock]

The hint is in the error message: "spell it as lowercase". so instead of projectId="x" put it all lower case like "projectid="x"

[agusterodin]

Fun fact: if you make the keys in the metadata object kebab case they be converted to camel case when you view in the dashboard.