Comunicación padre-hijo con props en SolidJS

Contenido del curso

No sé dónde empezar

Introducción a SolidJS

Reactividad a profundidad

Renderizado en Solid

Reactividad en Listas

Componentes

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:55

Comunicación padre-hijo con props en SolidJS

Curso de SolidJS

Clase 23 de 27

Clase 23 / 27

Recursos

Cuando un componente hijo necesita datos que viven en el componente padre, los props en SolidJS resuelven esa comunicación. Aquí verás cómo pasar propiedades dinámicas desde un componente padre hacia un componente hijo Todo, cómo acceder a ellas dentro de la función y cómo aprovechar children para componer interfaces más flexibles.

¿Qué son los props en SolidJS y por qué los necesitas?

Los props son las propiedades o atributos dinámicos que un componente padre le entrega a un componente hijo. En el ejemplo, el componente Todo intentaba leer variables como todo o index que no existían en su propio contexto, sino dentro del for del componente padre [01:00].

La solución es pasar esos datos como atributos en JSX, igual que se asignan atributos a una etiqueta HTML, pero con valores dinámicos.

¿Qué son los props en SolidJS? Son los atributos que un componente padre le pasa a un componente hijo a través de JSX. Llegan agrupados como el primer parámetro de la función del componente.

¿Cómo pasar props desde el componente padre?

Dentro del for que recorre la lista de tareas, cada iteración tiene acceso al ítem actual y a un index, que en SolidJS es una función reactiva tipo signal. Para llevar esos datos al hijo, se escriben como atributos en el JSX:

todo={item} para enviar el objeto de la tarea actual.
index={index} para enviar el signal del índice que SolidJS usa para detectar cambios.

El index viaja como función, no como número, porque mantiene la reactividad que el for necesita para identificar dónde ocurren los cambios [01:35].

¿Cómo se reciben los props dentro del componente hijo?

En SolidJS, cada componente es una función. Todo lo que le pasaste por JSX llega como el primer argumento de esa función. Puedes nombrarlo como quieras, pero el estándar de la industria es llamarlo props.

jsx function Todo(props) { return ( <li> <input checked={props.todo.completed} /> <span>{props.todo.text}</span> </li> ); }

A partir de ahí, cualquier referencia a todo se convierte en props.todo, y cualquier referencia a index se convierte en props.index. Eso aplica en varios lugares del componente:

En el onChange que actualizaba la tarea por su índice.
En el onBlur que dispara un produce para mutar el estado.
En el acceso a props.todo.completed para el checkbox.
En el acceso a props.todo.text para el texto visible.

¿Por qué se llama props al primer parámetro? Es una convención. Representa las properties que el padre le entrega al hijo. Puedes renombrarlo, pero props deja claro su rol.

¿Por qué no debo desestructurar los props en SolidJS?

Aunque el código pasa por JSX, los props en SolidJS están conectados a la reactividad. Acceder siempre como props.todo o props.index mantiene viva esa conexión. Si guardas y abres el navegador, el render vuelve a funcionar correctamente, aunque algunas funciones que viven fuera del contexto del hijo todavía fallen [04:10]. Eso se resuelve más adelante con la comunicación inversa entre componentes.

¿Qué es la prop children y cómo permite composición?

SolidJS expone propiedades especiales cuando trabajas con componentes. Una de las más útiles es children, que representa todos los elementos hijos que el padre coloca dentro del componente al usarlo en JSX.

Ya la usaste sin darte cuenta cuando trabajaste con for. El for recibe como children una función parecida a map, que itera sobre los elementos de la lista [05:20].

jsx <Todo todo={item} index={index}> {item.text} </Todo>

Dentro del componente Todo, en lugar de pintar props.todo.text, puedes pintar props.children. La diferencia es de diseño:

Con props.todo.text, el hijo decide qué mostrar.
Con props.children, el padre decide qué renderizar y cómo estilizarlo.
El hijo solo se encarga de ubicar ese contenido en la posición correcta del DOM.

Esto abre la puerta a aplicarle negritas, estilos personalizados o cualquier transformación al texto desde el padre, sin tocar el componente hijo.

¿Cuándo conviene usar children en lugar de un prop específico? Cuando quieres que el padre controle el contenido visual y el hijo solo defina la estructura. Da más libertad de composición.

¿Qué errores siguen apareciendo después de aplicar props?

En el primer render todo se ve bien, pero algunas interacciones siguen rotas. Eso ocurre porque el componente hijo todavía intenta llamar funciones que viven en el padre y que aún no se le han pasado. La pieza pendiente es enviar también esas funciones como props, algo que se aborda en las siguientes clases para terminar de cerrar la comunicación entre el padre, el hijo y el estado de la aplicación.

¿Ya intentaste pasar funciones como props en tu propio componente? Cuéntame en los comentarios cómo te fue con children y qué patrón de composición prefieres.

Resumen

¿Qué son los props en SolidJS y por qué los necesitas?

La solución es pasar esos datos como atributos en JSX, igual que se asignan atributos a una etiqueta HTML, pero con valores dinámicos.

¿Qué son los props en SolidJS? Son los atributos que un componente padre le pasa a un componente hijo a través de JSX. Llegan agrupados como el primer parámetro de la función del componente.

¿Cómo pasar props desde el componente padre?

todo={item} para enviar el objeto de la tarea actual.
index={index} para enviar el signal del índice que SolidJS usa para detectar cambios.

El index viaja como función, no como número, porque mantiene la reactividad que el for necesita para identificar dónde ocurren los cambios [01:35].

¿Cómo se reciben los props dentro del componente hijo?

jsx function Todo(props) { return ( <li> <input checked={props.todo.completed} /> <span>{props.todo.text}</span> </li> ); }

A partir de ahí, cualquier referencia a todo se convierte en props.todo, y cualquier referencia a index se convierte en props.index. Eso aplica en varios lugares del componente:

En el onChange que actualizaba la tarea por su índice.
En el onBlur que dispara un produce para mutar el estado.
En el acceso a props.todo.completed para el checkbox.
En el acceso a props.todo.text para el texto visible.

¿Por qué se llama props al primer parámetro? Es una convención. Representa las properties que el padre le entrega al hijo. Puedes renombrarlo, pero props deja claro su rol.

¿Por qué no debo desestructurar los props en SolidJS?

¿Qué es la prop children y cómo permite composición?

Ya la usaste sin darte cuenta cuando trabajaste con for. El for recibe como children una función parecida a map, que itera sobre los elementos de la lista [05:20].

jsx <Todo todo={item} index={index}> {item.text} </Todo>

Dentro del componente Todo, en lugar de pintar props.todo.text, puedes pintar props.children. La diferencia es de diseño:

Con props.todo.text, el hijo decide qué mostrar.
Con props.children, el padre decide qué renderizar y cómo estilizarlo.
El hijo solo se encarga de ubicar ese contenido en la posición correcta del DOM.

Esto abre la puerta a aplicarle negritas, estilos personalizados o cualquier transformación al texto desde el padre, sin tocar el componente hijo.

¿Cuándo conviene usar children en lugar de un prop específico? Cuando quieres que el padre controle el contenido visual y el hijo solo defina la estructura. Da más libertad de composición.

¿Qué errores siguen apareciendo después de aplicar props?

¿Ya intentaste pasar funciones como props en tu propio componente? Cuéntame en los comentarios cómo te fue con children y qué patrón de composición prefieres.

Introducción a SolidJS

SolidJS vs React: reactividad granular explicada

Python para Principiantes: Fundamentos y Aplicaciones Básicas

Signals en SolidJS: crea datos reactivos

createEffect y side effects en SolidJS

Signals derivados vs createMemo en Solid

Reactividad a profundidad

Qué es la reactividad en Solid

Creación de una Librería Reactiva MiniSolid desde Cero

Implementación de Signals en Librería Reactiva Solid

Cómo createEffect conecta signals y efectos

Señales derivadas sin nuevas primitivas

createMemo para evitar renderizados innecesarios

Cómo Solid convierte JSX al DOM real

Renderizado en Solid

Configurando SolidJS con Tailwind para Todo App

Dark mode en SolidJS con signals

Renderizado Condicional en Solid: Técnicas y Optimización

Renderizado de listas reactivas con For en Solid

Manejo de Eventos en Elementos HTML con SolidJS

Reactividad en Listas

Optimización de Renderizado y Reactividad en Listas con SolidJS

Cómo funcionan los stores en Solid JS

Stores de SolidJS para datos complejos

Función produce para mutar stores en Solid

Componentes

Qué son los componentes en Solid

Comunicación padre-hijo con props en SolidJS

Eventos personalizados entre componentes React

Persistencia con localStorage y useEffect

Deploy de app Solid en Netlify

Solid y el futuro del desarrollo web

Comunicación padre-hijo con props en SolidJS