Passing Children to React elements

I was playing around with the raw React APIs, specifically React.createElement(), when I was going through the EpicReact workshop on React Fundamentals and I stumbled upon an interesting finding.

React.createElement(component, props, ...children) accepts an object of props as its second argument and subsequent arguments passed will be its children. However, since children is also a prop (which can be accessed using props.children), it made me wonder what happens if I try something like this:

React.createElement('div', {children: 'some inner text one'}, 'some inner text two')

Interestingly, when the children prop AND the children argument are both set, the latter takes precedence. Try it here!

I thought this would be useful to know even though JSX is usually used when writing React.

Leave a Comment