chan.dev/ lessons/ epicreact

Rendering children with CreateElement

children is a special property in React. Let’s make sure we know how they work.

Now we can add children in many different ways.

But we can also children with different types and get the same result!

Now this behavior isn’t limited to function overloading. We can pass an array to the children property for the same result.

Finally, any of these elements can be another React element.

Looking at the logged React element, we see:

We learned that:

<body>
<div id="root"></div>
<script type="module">
import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0/client'
const rootElement = document.getElementById('root')
const element = React.createElement(
'div',
{
// children: "Hello React",
// children: ["Hello", " React"],
children: [
'Hello',
React.createElement('em', null, ' React'),
],
className: 'greeting',
}
// "Hello",
// " React"
// ["Hello", " React"]
)
ReactDOM.createRoot(rootElement).render(element)
</script>
</body>