How to solve map loop not working to print data ( component ) ? React

Question

I have three componente

ComponentFather ( grand Parent component ) ComponentChild ( Child component of ComponentFather) ComponentChildChild ( Child component of ComponentChildChild)

The three components are connected so that each component is this child above.

I props data from ComponentFather to ComponentChildChild. And that work. But when I try to pring all data no work. Print only first data Chek code ->

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>
  );
};

Code above no work......

Why?

What i am try also to set data.map inside ComponentChildChild component

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

Also no work. Work only when I hardcode example data[0].name

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

But sometimes i will have 10 items... I need to print each

Answer 1

pass singleData instead data

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