Sergio Xalambrí
February 26, 2019

# Uso del prop children en React

El prop children tiene significado especial para React, veremos para que sirve y como usarlo en nuestros propios componentes.

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>`.