Is there any option to re-arrange the elements before return

[RameshKrish29]

I was getting html content from API, that data was managed by backend(Admin Panel). If anyone enter the order wrongly. I should re-arrange the order and display the content in right order.

For example:

The right format of the content is below

_

first title with italic style
second title with normal style
third title with bold style

_

If they entered wrongly, I have displayed the content like below

I want the method to re-arrange the order of the content before rendering. Is there any methods or example? please help me on this.

[remarkablemark]

@RameshKrish29 you can use the replace option.

Let's say you have the HTML string:

<ol>
  <li>first title with italic style</li>
  <li>second title with normal style</li>
  <li>third title with bold style</li>
</ol>

Let's save the value in variable html:

const html = `
  <ol>
    <li>first title with italic style</li>
    <li>second title with normal style</li>
    <li>third title with bold style</li>
  </ol>
`;

To reverse the order of the children inside the ol:

import parse, { domToReact, Element, DOMNode } from 'html-react-parser';

parse(html, {
  replace: (domNode: DOMNode) => {
    if (domNode instanceof Element && domNode.name === 'ol') {
      return <>{domToReact(domNode.children.reverse())}</>;
    }
  }
});

This means you can reorder the DOM nodes before using domToReact to render the replaced elements.

See CodeSandbox.