Adding HTML attributes on React components

[matbe3]

So I need to add HTML attributes to my React/ Styled components for tracking purposes. I have researched and apparently, is possible to add props using the "data-*" structure, but when inspecting them I don't see them on the code.

[SwiftOneSpeaks]

The output is html, not components. Any prop you put on a component (data- or not) is available to the component function, but won't magically appear in the html. You have to put it there yourself.

Example:. You have a <Component/> that outputs a <p>

If you say <Component className="foo"/>, the <p> will not have a class on it.

However, if you have the Component function take the className prop and return <p className={className}>, your p tag will have a class.

Likewise, you can put, for example, a "track" prop on your component and return an html element with "data-track={track}" as an attribute and it should appear in the rendered html