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.