反应本机中的循环组件

Question

I want to return a components like table using the following object. But I must use only points array. Do not need to head tab.

const states = {
  player: [
    {
      id: 1,
      name: 'David',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 2,
      name: 'John',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 3,
      name: 'Sam',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 4,
      name: 'Johanson',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    }
  ]
} 

I am using DataTable in react-native-paper. It has this structure;

 <DataTable>
        <DataTable.Header>
          <DataTable.Title>Dessert</DataTable.Title>
          <DataTable.Title>Calories</DataTable.Title>
          <DataTable.Title>Fat</DataTable.Title>
        </DataTable.Header>

        <DataTable.Row>
          <DataTable.Cell>Frozen yogurt</DataTable.Cell>
          <DataTable.Cell>159</DataTable.Cell>
          <DataTable.Cell>6.0</DataTable.Cell>
        </DataTable.Row>

      </DataTable>

Answer 1

I would go about it like this:

Edit: Since you want to render the points in columns instead of rows, I am assuming all players have equal number of points and using first player's points to render the rows.

const states = {
  player: [
    {
      id: 1,
      name: "David",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 2,
      name: "John",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 3,
      name: "Sam",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 4,
      name: "Johanson",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
  ],
};

function MyDataTable() {
  return (
    <DataTable>
      {states.player[0].points.map((p, i) => (
        <DataTable.Row key={p}>
          {states.player.map((player) => (
            <DataTable.Cell>{player.points[i]}</DataTable.Cell>
          ))}
        </DataTable.Row>
      ))}
    </DataTable>
  );
}