我如何使用 map 打印一个 arrays 数组，数组中的对象反应？

Question

I have functional component that takes an array of arrays with objects but I don't know how to access data in the return function of the render

let dataItems = [
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
];

I tried to pass the data to another component to print the data but I don't know how to pass an unnamed array with the map function.

My code.

 dataItems.map((item, index) => {
  return ( 

{ item.content.map((c, i) =>
   <PrintComponent>
   )
    }

)
   })

I will print a bi-dimensional matrix in chunks of 4 elements using bootstrap 4 tabs

Im trying to show the data like a bi-dimensional array like this

row1	row2	row3	row4
data01	data02	data03	data04
data05	data06	data07	data08

...

Answer 1

I solved with make the component within the maps.

using this lines

dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});

gives me the data several times, so I include some slice for only one time

dataItems.slice(0, 1).map((item) => {
return item.map((items) => { console.log(items)});
});

Answer 2

For this you have to use multiple maps for data rending.

For Example:

dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});