Uso del prop children en React

Antes hicimos que Header tenga su contenido personalizable mediante un prop que llamamos children. Resulta que hay una razón especial para nombrar así a este prop.

React considera children un prop especial internamente, si recordamos de cuando creamos nuestro primer elemento la sintaxis de React.createElement es la siguiente:

React.createElement(type, [props], [...children]);

El primer argumento es el tipo de etiqueta que vamos a crear o el componente que vamos a usar, el segundo es un objeto con los props -atributos de la etiqueta- y desde el tercero en adelante es el contenido en forma de elementos de React.

Resulta que todo lo que pasemos desde el tercer argumento en adelante React lo considera el prop especial children por lo que en vez de pasar { children } como prop normal podemos simplemente pasarlo como el tercer argumento.

Esto nos permite actualizar esto:

React.createElement(Header, {
  children: React.createElement(Hello, { name: "Sergio" })
});

Para que use esto:

React.createElement(
  Header,
  null,
  React.createElement(Hello, { name: "Sergio" })
);

Y la forma en que usamos props.children dentro de Header quedaría intacta. ¿Por qué es importante esto? En principio porque podemos pasar cualquier cantidad de elementos hijos por los que en vez de usar children como un array podemos simplemente pasar más y más argumentos a createElement.

En segundo porque la idea es que nuestros componentes funcionen muy similar a HTML, usando { children } terminaríamos con un HTML similar a esto:

<header children="<Hello name='Sergio' />" />

Mientras que usando children como tercer argumento sería más similar al uso normal en HTML.

<header>
  <Hello name="Sergio" />
</header>

Básicamente acabamos de convertir Header de ser una etiqueta autoconclusiva como <img /> a una etiqueta que posee inicio y cierre como lo es <header>.