React.Children y React.cloneElement

11.-React.Children y React.cloneElement

–
Para poder pasar propiedades especiales a los componentes hijos de nuestros componentes contenedores cuando hacemos composición.

–
Cuando enviamos más de un componente o elemento hijo al que use CloneElement, la app deja de funcionar y suelta un error. CloneElement necesita recibir un elemento de react, cuando children es más de un componente entonces tenemos un array, para esto existe React.Children que nos ayuda a que CloneElement entienda sin importar cuantos elementos vienen en el props.children.

function TodoHeader({ children, loading }) {
  //No importa si viene un elemento, o dos o null siempre nos devuelve un array

  return (
    <header>
      {React.Children.toArray(children).map((child) =>
        React.cloneElement(child, { loading: loading })
      )}
    </header> //Por cada child vamos a llamar a clone element.
  ); //Crear elemento a partir de otro (elemento, objeto con las props que queramos que tenga)
}

No son las herramientas más populares pero pueden ser muy útiles cuando queremos compartir una o ciertas props a los componentes hijos de un componente contenedor.

Imagino un componente que se renderiza en diferentes partes pero en alguna de ellas toma algunas propiedades diferentes ya sea estilos o textos. se podría en ciertas partes usar React.cloneElemet para no tener que modificar otros componentes padres del aplicativo.

🗄️ React.Children y React.cloneElement

Apuntes

React.cloneElement

• Con esta característica de React podemos crear elementos de Nodos React
• Cabe aclarar que esta funciona con un unico nodo, en caso de aplicarla en un conjunto de los mismos podemos ayudarnos de React.Children

React.Children

• Nos permite manipular la prop children entre uno de sus usos podemos volver un conjunto de nodos react a un array

Me pareció sencillo trabajar así también jeje, no se qué opinen:

import React from "react";

function TodoHeader({ children, loading }) {
  return (
    <header>
      {
        [...children].map((child, index) => (
          React.cloneElement(child, { loading, key: index })
        ))
      }
    </header>
  );
}

export {
  TodoHeader
};

 {React.Children.toArray(children).map((child) => React.cloneElement(child, { loading }))}

Pónganle un:

.TodoSearch__container {
   transition: 1s;
}

Y verán que bonito

React.Children tiene varias utilidades para trabajar con props.children. Para profundizar en que hacen les dejo lo siguiente:
React.Children

React.Children.map( children, function() )

React.Children.forEach( children, function() )

React.Children.count( children )

React.Children.only( children )

React.Children.toArray( children )

Con respecto a React.cloneElement( children, { props } ) me sirve para cuando tengo varios hijos dentro de un componente y casualmente todos ellos usan las mismas props que el padre además de otras propias. Por tanto para evitar escribirle las mismas props a cada hijo, las clonamos del padre y con métodos de array las repartimos entre los hijos.
React.cloneElement

Recomiendo mucho el link que adjunto Juan de Medium! Buenísimo, me lo dejó super claro

React.Children y React.cloneElement , me parecieron bastante utiles para pasar props entre varios hijos y contenedores, con eso no tener que estar pasando todos los props a cada hijo directamente

jejjejejej ese error del minuto 12:05 se solucionaba dandole exactamente el index del children

  { React.cloneElement(children[0], {loading}) }
  { React.cloneElement(children[1], {loading}) }

Inquietud

Buenas tardes a todos, tengo una inquietud porque en este curso no se esta dejando Archivos de la clase?, es muy ganador encontrar los archivos para un mejor entendimiento. O en su caso un repositorio de git de cada clase. Espero una repuesta agradezco si es del profesor @JUAN DAVID CASTRO

🤯 despacio despacio cerebrito.
Wow, esto sí que me voló la cabeza.

Una vez use React.Children y React.cloneElement para crear un componente de formulario. En el que pasandole ciertas propiedades terminada pasandole los valores a todos sus hijos (inputs)

Me parece que está súper práctico para agregar soporte de idiomas! Dejo un ejemplo de cómo lo distribuyo en mi header, aunque no pude usar Children 😅 👇

Ejemplo: https://juliantoro91.github.io/TAPP-react-todo-app/

En App.js

    <TodoHeader
        loading={loading}
        languageSupport={languageSupport}
        languageShifter={
          <LanguageShifter
            saveLanguage={saveLanguage} />}
        todoCounter={
          <TodoCounter
            tasksState={tasksState}
          />}
      />

En el TodoCounter del header

<div className="header-todo-counter">{ react.cloneElement(todoCounter, { loading, languageSupport }) }</div>

Repositorio Github: https://github.com/juliantoro91/TAPP-react-todo-app

Me parece muy útil para hacer animación con clases de CSS, simplifica mucho la lógica que hay que implementar .-.