如何在 reactjs 中使用 map function 和渲染列表

Question

I was trying to load this array and render it as a table using map function how can I do it. The array response is from useState .

I have tried using list indexing and rendering the array as a table but the array changes its number of columns and rows dynamically so indexing does not work as the number of columns and rows keep on changing.

Sample image is shown below:

what I have tried

 {arrayData.map(function (item) {
  return item;
 })}

and got output like

let array = [
    [
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
[
20.115657806396484,
7.724868297576904,
19.88268280029297,
19.88268280029297,
19.88268280029297
],
[
14.476829528808594,
6.237934112548828,
13.77694320678711,
13.77694320678711,
13.77694320678711
],
[
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
[
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
]

Answer 1

The name of your array and the what you're trying to map do not match.

So

let array

Should be:

const arrayData

For:

 {arrayData.map((item) => {
  return item;
 })}

To work. Also note arrays should be updated with useState so if that's the reason you're using let . You don't mention any further code for the grid you're trying to do. Are you passing this to a component in the map or building everything when looping?

You also have a multidimensional array so I'm unsure what your goal is when you only show one map.