react generic component or component as attribute

Question

Hello I'm trying to have a generic "component" that toggles a class, think of it as tabs but I dont want a fixed markup on it, so I was thinking to use attributes to manage the initialization.

For example this code should initialize on the , clicking on it will toggle the .active class on .target.

<button data-toggle=".active" data-target=".target">button</button>
<div class="target"></div>

The problem is that I need to initialize the data attributes with componentDidMount() and componentDidUpdate() but I can't specify it on all components, is it possible to have a global componentDidMount() for all the app? or is it possible to assign a "generic component" with the attribute? What's the best way to proceed?

I want to use attributes because I need to keep it generic, I don't want to setup a component with etc..

EDIT

I was thinking about using componentDidMount and componentDidUpdate on the main component app, since this methods seems to fire after all chidrens have done mounting or updating, there maybe I can query the attributes.. More to come

EDIT2

Well I think the right solution is to use react components and inside them initialize the vanilla js classes imported inside the component, it should work I don't know why I didn't think about that before

Answer 1

You should not use atrributes but create a component that can wrap other components - thru this you can pass as a prop access to the components life cycle methods.

You can thus pass to the gerneric handlers component the target and the className for active. It will do the work and the internal component will be the UI. This is the react way vs attributes.