JetBrains IDEs - How To Prevent IDE From Changing "Class" Attribute To "ClassName" In React Projects On Copy And Paste?

Question

I work on a React project with my JetBrains IDE and most of the elements in my project are React components. I do however use the Ionic Icons library and when I need to insert an icon into my component, I use something like:

<ion-icon class="icon" name="chevron-forward-outline"/>

Since the Ionic elements are not React components, it uses the class attribute as opposed to the className attribute. Every time I copy and paste an Ionic element like the one above, my JetBrains IDE automatically changes the class attribute to className.

How do I prevent the IDE from doing this?

Answer 1

please try disabling Convert HTML when pasting into JSX files (convert attributes, close single tags) in Settings | Editor | General | Smart Keys | JavaScript