By now, you’re probably fairly comfortable with creating elements with React.createElement(). You know that when you pass a children argument, it will be rendered inside the created element — as its children.

But what happens when you create a component element with children?

You may know the answer already! Have a little think about it, and check your answer below once you’re ready.

The third and subsqeuent arguments to React.createElement() are always added to the props as children — regardless of the type.

So if you create an element with a custom type and children, you can access those children on its props.

In fact, these two createElement calls are equivalent:

let a = createElement(
  AnyType,
  {
    children: x
  }
)

let b = createElement(
  AnyType,
  {},
  x
)

#Components return elements

React components are functions that accept a props argument, and return an element.

That element can come from anywhere — including props.

For example, if you were feeling particularly unproductive, you could create a component that does nothing but return its children prop.

index.js

import { createElement } from 'react'
import ReactDOM from 'react-dom'

// Components are just functions that take props and return elements.
function Identity(props) {
  return props.children
}

let element = createElement(
  Identity,
  {},
  createElement('h1', {}, 'Hello, world!')
)

ReactDOM.render(
  element,
  document.getElementById('root')
)

Build In Progress

#Layout elements

One common use case for the children props is layout components, i.e. components that wrap their children in a styled container.

For example, you could create a component that centers its children on the screen, using flexbox and absolute positioning, solving one of the hardest problems in computer science once and for all!

index.js

import React from 'react'
import ReactDOM from 'react-dom'

// Component functions are usually named in CamelCase.
function CenterOnScreen(props) {
  return (
    <div style={{
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,

      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center', 
    }}>
      {props.children}
    </div>
  )
}

ReactDOM.render(
  <CenterOnScreen>
    {React.createElement(
      'pre',
      { style: { fontSize: '32px' } },
      // JSX strips newlines, so manually call `createElement`
      // to pass through the newline.
      'INSERT\n COIN'
    )}
  </CenterOnScreen>,
  document.getElementById('root')
)

Build In Progress

#A `ContactList` component

Let’s create a component to hold the top-level styles and markup for your contact list.

I’ve provided a set of starter styles in styles.css, along with comments explaining where they go. I’ve also provided a Contact component, based on the exercise from the previous lesson.

The starting code renders a ContactList element, but the component is missing. It’s up to you to create the component.

Once complete, all of your elements should be encapsulated within one of the two components. You’re code will be modular - as God and the Unix designers intended!

Reference

The starting code uses Array.prototype.map and spread syntax to build an array of ContactItem elements.

You can read more on these here:

Array.prototype.map »

Spread syntax »

index.js

Contact.js

billionaires.js

styles.css

import React from 'react'
import ReactDOM from 'react-dom'
import './styles.css'
import { Contact } from './Contact.js'
import { billionaires } from './billionaires.js'


/*** put your `ContactList` component here ***/


let contactElements = billionaires.map(billionaire =>
  // The ... adds all properties from `billionaire`
  // to the <Contact> element's props.
  <Contact {...billionaire} key={billionaire.email} />
)

ReactDOM.render(
  <ContactList>{contactElements}</ContactList>,
  document.getElementById('root')
)

Build In Progress

Progress to next section.

The children prop

#Components return elements

#Layout elements

#A ContactList component

Reference

#A `ContactList` component