tengo tres componentes

ComponentFather (gran componente principal) ComponentChild (componente secundario de ComponentFather) ComponentChildChild (componente secundario de ComponentChildChild)

Los tres componentes están conectados de modo que cada componente es este hijo de arriba.

Apoyo datos de ComponentFather a ComponentChildChild. Y ese trabajo. Pero cuando trato de obtener todos los datos, no funciona. Imprimir solo los primeros datos Verificar código ->

 export const ComponentFather = () => { // this is only mockup data for example let data = [ { id: 2000004, name: 'test123.pdf', }, { id: 2000005, name: 'test123123.pdf', }, ]; return ( <ComponentChild data={data}> </ComponentChild> ); }; export const ComponentChild = ({data}) => { // console.log(data); i got all data. return ( {data.map((singleData) => { <ComponentChildChild data={data}> </ComponentChildChild> })} ); }; export const ComponentChildChild = ({data}) => { return ( <div> { data.name } </div> <div> { data.id } </div> ); };

El código anterior no funciona...

¿Por qué?

Lo que intento también es configurar data.map dentro del componente ComponentChildChild

 export const ComponentChildChild = ({data}) => { return ( { data.map((singleData) => { <div> { data.name } </div> <div> { data.id } </div> })} ); };

También sin trabajo. Funciona solo cuando codifico datos de ejemplo [0].name

 export const ComponentChildChild = ({data}) => { return ( <div> { data[0].name } </div> <div> { data[0].id } </div> ); };

Pero a veces tendré 10 artículos... Necesito imprimir cada uno