Jquery data attributes in react component

Dear Experts,
I have html code like <p className="text-4 text-color-secondary font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 800, 'minWindowWidth': 0}">RELIABLE CONSTRUCTION SERVICE</p>
not working when using in react component.
if i remove data-* then p element is visible.

What is the plugin?

I would suggest you try to find a React version of the library.

Looking at the attribute name, I’m guessing it is some kind of typing animation?

My designer design the website in html , so when append data-* in html element then it does not appear

Well, you have to rewrite the design to React.

Don’t use plain DOM manipulation libraries with React, use something appropriate.


You still didn’t tell us what the plugin is.

I also wouldn’t be surprised if it depends on jQuery, so you likely need to load that as well. That is, if the plugin is even going to work with React.