react-children-utilities
react-children-utilities copied to clipboard
`deepMap` not iterating over elements with only text as children.
Consider the following elements,
<p className="test1">Test text 1</p>
<p className="test2">Test text 2 <span>Test text 3</span> test text 4</p>
I use deepMap
over each element and console.log
each child as it is iterated over. In the first case it only iterates over the <p>
element.
In the second case it iterates over three elements: the "Test text 2" at the start, the <span>
element and the "test text 4" at the end.
Is this the intended behaviour?
In the first case I would have thought that the "Test text 1" text was a child of the <p>
tag, and therefore deepMap
should recurse again over the "Test text 1" child.
In the second case I would have thought that deepMap
should recurse into the "Test text 3" text inside the <span>
element since I would have thought that the "Test text 3" text was a child of <span>
.
I see your point. The current behaviour only iterates on a component if their children are "complex", that means they are elements, not primitives.
The only reason "Test text 2" and "test text 4" get iterated is because that span inside the p, which makes the p element qualify as it has complex children.
I'm curious, do you want to iterate over the text nodes (non complex children) as well?
By definition perhaps might be the right choice since they are all children
I expected deepMap
to iterate over text nodes since they are children. In my usage I was using deepMap
hoping to iterate over all the text nodes so I could apply changes to all text within a <div>
. In my case I wanted it to only iterate over text nodes (but obviously it is easy to check whether a node is a text node or not).
Obviously there are workarounds for my use case, but it might be nice either fixing or making a note in the documentation.