[Question] How to override HTML component to JSX

[AlexanderPrendota]

Hello!

Could you give me some advice. I want to override raw html to JSX.

so, I have plain HTML like this:

<h1>Header<h1>
<div>Text
   <div>Some another text</div>
</div>
<code> hello word</code>

and react components:

export const Code = ({ children }) => (
  <div className="code">{children}</div>
);

export const H1 = ({ children }) => (
  <div className="h1">{children}</div>
);

so, I want to render like this:

<h1 class="h1">Header<h1>
<div>Text
   <div>Some another text</div>
</div>
<code class="code"> hello word</code>

and save all of children after overriding.

The code will be like:

import { Parser } from 'html-to-react';

  const processingInstructions = [
      {
        shouldProcessNode(node) {
          return node.type === 'tag';
        },
        processNode(node, children, index) {
          if (node.name === "h1") {
               return <H1>{children}</H1>
          }
    ];

    const isValidNode = function() {
      return true;
    };

    const reactHtml = new Parser().parseWithInstructions(
      text,
      isValidNode,
      processingInstructions
    );

Thanks!

[aknuds1]

I'm not sure exactly what you're asking here, can you formulate a more concrete question?

Do you mean you want to use JSX syntax in processingInstructions.processNode? I don't know how that would be possible, I don't use JSX. To me it sounds as if you should just use standard JavaScript, I don't see why you need to involve JSX although I might be missing something.

[aknuds1]

Closing this for now due to inactivity.