Crear respuestas anidadas dentro de un sistema de preguntas es uno de esos retos que parecen complicados hasta que entiendes la lógica detrás. Aquí aprenderás a construir comentarios hijos reutilizando un componente, configurando relaciones recursivas en la entidad y filtrando la consulta para evitar duplicados visuales.

¿Qué necesitas para listar respuestas hijas dentro de una respuesta principal?

La idea es que una respuesta pueda contener otras respuestas dentro de sí misma, igual que ocurre en los hilos de comentarios de cualquier red social. Para lograrlo, trabajas en tres frentes: la vista, la entidad y la consulta.

El primer paso es identificar una pregunta con pocas respuestas para hacer la prueba. Creas una respuesta llamada Principal y luego agregas Hija 1 e Hija 2, que serán las que dependan jerárquicamente de la principal.

¿Qué es una respuesta hija? Es un registro que apunta a otra respuesta como su padre mediante un ID, generando una estructura anidada dentro de la misma tabla.

¿Cómo reutilizar el componente de pregunta para mostrar respuestas hijas?

Aquí entra en juego el concepto de componente reutilizable. En lugar de escribir lógica nueva, copias el bloque que ya existe en el componente de la pregunta y lo pegas dentro del componente de la respuesta [01:05].

Para evitar conflictos de nombres, cambias la variable original por item, mientras que la variable respuesta se mantiene. Ese pequeño ajuste permite que el componente se llame a sí mismo cuando detecta contenido hijo.

El ciclo foreach es lo que habilita la recursividad. Si una respuesta tiene contenido dentro de sí, el componente vuelve a ejecutarse y renderiza ese contenido anidado.

¿Qué relación necesitas registrar en la entidad?

Una pregunta tiene muchas respuestas, eso ya lo sabes. Pero ahora necesitas declarar que una respuesta también tiene muchas respuestas. Copias la relación existente y la replicas dentro de la entidad de respuesta [01:38].

Esta autorrelación es la que sostiene toda la estructura. Sin ella, el sistema no sabría cómo enlazar una respuesta con sus hijas.

¿Cómo asignar el padre correcto en la base de datos?

Para probar la jerarquía visualmente, asignas manualmente el ID del padre en la tabla. Si la respuesta Principal tiene el ID 405, entonces Hija 1 e Hija 2 deben llevar 405 en su campo de padre [02:10].

Para reforzar el efecto visual de anidamiento, agregas un div con la clase ml-8, que aplica un margen izquierdo. Ese pequeño detalle hace evidente la jerarquía en pantalla.

• Identifica el ID de la respuesta principal en la tabla.
• Asigna ese ID en el campo de padre de cada respuesta hija.
• Aplica la clase ml-8 para generar el sangrado visual.

Al actualizar el navegador, las hijas aparecen anidadas bajo la principal, pero notas un problema: las hijas también se imprimen como respuestas principales, duplicando el contenido.

¿Cómo evitar que las respuestas hijas se dupliquen en la vista?

El truco está en modificar la consulta dentro del componente de pregunta. Le indicas que solo traiga las respuestas donde el campo de padre sea nulo [02:55]. Así filtras únicamente las respuestas principales, y las hijas se renderizan a través del ciclo recursivo.

¿Por qué se duplican las respuestas hijas si no filtras la consulta? Porque la consulta original trae todas las respuestas sin distinguir entre principales e hijas, así que el componente las imprime dos veces: una como principal y otra como hija.

Para probarlo, creas una segunda jerarquía: Principal 2 con su Hija 3, asignando el ID 408 como padre. Al actualizar, el resultado muestra ambas estructuras anidadas sin repeticiones.

¿Qué aprendiste sobre componentes recursivos?

La lógica completa se sostiene en tres pilares que se conectan entre sí:

1. La autorrelación en la entidad, que permite que una respuesta tenga muchas respuestas.
2. El componente reutilizable, que se invoca a sí mismo dentro del foreach.
3. El filtro en la consulta principal, que aísla las respuestas raíz y deja que la recursividad haga el resto.

Este mismo patrón sirve para hilos de comentarios, categorías con subcategorías o cualquier estructura jerárquica que quieras representar en una sola tabla.

Ahora te toca a ti: crea al menos tres comentarios anidados y comparte en los comentarios cómo te quedó el resultado visual.