Add Current Node Index in `replace` Callback

[yaman3bd]

Add Current Node Index in `replace` Callback

[remarkablemark]

Update: I released a version that added the index as the 2nd argument in replace:

• #1261 (comment)

[remarkablemark]

@yaman3bd it shouldn't cause performance issues since both calls are executed in the same block: https://github.com/remarkablemark/html-react-parser/blob/v5.0.11/src/dom-to-react.ts#L47-L58

[remarkablemark]

@yaman3bd can you use transform?

parser(html, {
  replace(domNode) {
    // ...
  },
  transform(reactNode, domNode, index) {
    if (domNode instanceof Element && domNode.type === "script") {
      reactNode.props.id += index;
    }
    return reactNode;
  },
});

[yaman3bd]

I cannot, it throws this error:

TypeError: Cannot assign to read only property 'id' of object '#<Object>'

also tried this:

Object.assign(reactNode.props, {
  id: `${scriptId}-${index}`
});

same error, also I have these TS errors in transform:

I tried to solve the errors, no luck

[remarkablemark]

Try React.cloneElement:

transform(reactNode, domNode, index) {
  if (domNode instanceof Element && domNode.type === "script") {
    return React.cloneElement(reactNode, { id: `${fixedID}-${index}` });
  }
  return reactNode;
}

[yaman3bd]

it worked, thanks a lot for your help.
but I have one question, using replace to change the element, and then using transform to clone the same element only to pass id, would not cause performance issues?