hyperapp: {...props} causes TypeError

This code crashes due to children being assigned to the <div>. I think it works in React. I’m assuming React doesn’t pass children when it’s empty. Not sure though.

TypeError: Attempted to assign to readonly property.

TypeError: undefined is not an object (evaluating 'e.childNodes')

Broken Code

export default ({...props}) =>
	<div {...props}>Example!</div>

Working Code

export default ({children, ...props}) =>
	<div {...props}>Example!</div>

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 22 (10 by maintainers)

Commits related to this issue

Strip children from props. Fix #93. Breaking change. Before, <MyComponent> function received a single data object, "props". To access children node, you did props.children. This change strips .child... — committed to jorgebucaran/hyperapp by jorgebucaran 7 years ago

Most upvoted comments

In Inferno & Preact, children gets stripped from the props object.

lukeed on Feb 15, 2017

Another interesting thing when passing children to props was that you can use such thing

var Foo = ({ name, children }) => <div>
  <h1>{ name }</h1>
  <p>{ children }</p>
</div>

var link = <a href="#">Hello World</a>
var tree = <Foo name="Charlike" children={ link } />

instead of the link inside the Foo tag

var link = <a href="#">Hello World</a>
var tree = <Foo name="Charlike">{ link }</Foo>

Kinda like the first one and found it useful.

tunnckoCore on Feb 18, 2017

I’d go with option 1. Especially since you’re not shipping hyperx anymore, and instead welcoming any plugin-renderers, they nearly all expect children to be its own parameter.

lukeed on Feb 18, 2017

@dodekeract

Component functions only receive a single data (props) argument, why then:

export default ({children, ...props}) =>
	<div {...props}>Example!</div>

I think I’ll need an example I can actually run in order to figure this out.

jorgebucaran on Feb 15, 2017