Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Traversing children in renderElement

See original GitHub issue

Do you want to request a feature or report a bug?


What’s the current behavior?

Children is always single component, not collection.

Slate: 0.59.0

What’s the expected behavior?

It would be nice to be able to traverse children provided in renderElement functions (with React.Children).

That way you can for example visually group/separate elements without actually changing document structure.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

Mangattcommented, Feb 28, 2021

Great, I’ll do that next week.

Nested lists are good example, as managing proper structure is immense amount of work and results are still not bulletproof. With this change you can have just flat list-item type with depth prop and render proper structure on the fly.

After this change you can produce from following structure:

	type: 'list',
	children: [
		{type: 'list-item', children:['Item 1']},
		{type: 'list-item', children:['Item 1.1'], depth: 1},
		{type: 'list-item', children:['Item 2']},

this HTML:

		<div>Item 1</div>
			<li>Item 1.1</li>
	<li>Item 2</li>
ianstormtaylorcommented, Feb 27, 2021

@Mangatt nice, a useChildren hook sounds like a good way to do it. A PR would be great.

Can you explain the structure you’d like to impose by iterating children, or provide any pseudo-code snippets of the kind of functionality you’re trying to achieve? (Often helps in PRs for people to understand what you’re asking for.)

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Children And Iteration Methods - Smashing Magazine
Children.toArray doesn't traverse through React Fragments. We learned about an open-source package called react-keyed-flatten-children and ...
Read more >
Enhance formErrorHandler to include children errors ... - Drupal
Add a RenderElement property which stores all errors of their ... Childrens don't need to be direct descendants, but traverse up the tree....
Read more >
Learn JavaScript by building a UI framework: Rendering DOM ...
renderElement then loops through the attrs object, sets any attributes it finds and then works on any children present in the children array ......
Read more >
CSS Scroll Snap - support snapping to nested elements
Source/WebCore/rendering/RenderElement.cpp:126 > + // Find the ... the current > + // node and traversing its parents (or shadow hosts).
Read more >
[AskJS] Most efficient way to re-render element's children array
[AskJS] Most efficient way to re-render element's children array. I have an elemnt that has a list of childs elements that can always...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found