Updating children nodes of parent and passing them to be processed.

[simplecommerce]

Hi,

My question is quite peculiar and I believe is related to this issue.

To be as clear as possible, here is my situation.
In my HTML string I have a form with input fields.
I have a rule that checks for the form tag and then renders a react component for the form and passes its children.

I have another rule that processes the input nodes and renders react components.

I want to be able to determine if the input being processed is actually a child of the parent form tag.
In case the HTML string has input fields that are not under a form tag, etc. (for whatever reason)

So I was thinking that maybe I could process the node.children and set an attribute for each children matching the input field under the form node. I got the idea from here.

The problem is that when I do it like that, it doesn't process the other rules, for the same node.

So I was wondering, if there would be an easy way I could achieve this?

At first I was thinking of adding an attribute on the form tag, say form-identifier="something".
And then in the input node, go up the parent tree and look for that attribute.
Or do the reverse, and tag its children with an attribute, so I can recognize it when I get to the child in another rule.

Any help would be appreciated.

Great library!

[simplecommerce]

Quick update, I did the following in my processing rule for the inputs:

function isChildOfNode(parent, type, name) {
  if (!isEmpty(parent) && parent.type === type && parent.name === name) return true;
  if (!isEmpty(parent.parent)) return isChildOfNode(parent.parent, type, name);
  
  return false;
}

When the node matches input, I call this function and pass it node.parent to check if its a children of a form.

It works, but I am not sure if its the best way to do this.

I would appreciate any feedback or suggestions.

Thanks!

[aknuds1]

It's difficult for me to say without coding up an example, and based on that deriving the best approach. It wouldn't be a good use of my time though, I think.

If you could produce a test case corresponding to what you're trying to do, I could try to figure out the right solution. For example fork this repo and add a case to the test suite.

[aknuds1]

Hi @simplecommerce - do you want to provide an example case for this (in code)?

[simplecommerce]

@aknuds1 Sorry I have been so busy, I will build a sample code right now and show it to you to give you an idea of what I was trying to achieve. Thanks for the follow-up

[simplecommerce]

@aknuds1
Here is the example, sorry if its not clear enough but I tried to put it up as fast as I can based on my current use.

https://codesandbox.io/s/lingering-shape-f3391

In this example, I have 2 processing instructions, one that will parse a form into a Formik form.
And another to process its children.

Since I do not want to parse all form into Formik form, I added a specific attribute called data-sc-internal-form, with this, I know when to parse it.

The issue comes, when I want to parse its children into Formik input fields.
I need to know if the child is part of the same parent, so I currently am using a function I created to move back up the tree isChildOfNode.

If you click submit on the form you will see its being handled by Formik.

[aknuds1]

So what you want to do is to process the children of the form? Maybe you could solve this by using a preprocessing function that will traverse the form's children (i.e., in the preprocessing function you'll handle the form, and then visit each of node.children) and set an attribute on them? Then, in your processing function, you can recognize the form's children through the attribute you set before and return React elements correspondingly.

[simplecommerce]

So what you want to do is to process the children of the form? Maybe you could solve this by using a preprocessing function that will traverse the form's children (i.e., in the preprocessing function you'll handle the form, and then visit each of node.children) and set an attribute on them? Then, in your processing function, you can recognize the form's children through the attribute you set before and return React elements correspondingly.

Yes, I had thought of that and tried it before, within the actual processing function when hitting the "form", but the attribute I was setting did not seem to be there when reaching the children, that is why I had to do a custom function to go back up the tree in order to see the parent form.

Your idea would've been easier and better if I was able to make it work.