如何在ReactJS中使用数组数组呈现表？

Question

I have a page that has an array of arrays with different groups and members. What I'm trying to achieve is to create a table that displays the project name and the members in it as sown below:

------------ ------------ 
| Project1 | | Project2 | 
------------ ------------  
| student1 | | student2 |
------------ ------------  
| student2 | | student3 | 
------------ ------------  

------------ ------------ 
| Project3 | | Project4 | 
------------ ------------  
| student4 | | student6 |
------------ ------------  
| student5 | | student7 | 
------------ ------------ 

On the actual dataset, some groups might have more students, and there are about 50 groups. Below, is my failed attempt at rendering a table similar to the one above

import React, { Component } from "react";
import { Row, Container, Col, Form, FormGroup, Label, Input, Button, FormText, FormFeedback } from "reactstrap";

class ViewGroups extends Component {
  constructor(props) {
    super(props);

    this.state = {
      groups: [
        {
          projectName: "Project 1",
          students: [
            {
              name: "student1",
              GPA: "3.4"
            },
            {
              name: "student2",
              GPA: "3.2"
            }
          ] 
        },
        {
          projectName: "Project 2",
          students: [
            {
              name: "student3",
              GPA: "3.4"
            },
            {
              name: "student4",
              GPA: "3.9"
            }
          ] 
        },
        {
          projectName: "Project 3",
          students: [
            {
              name: "student5",
              GPA: "3.0"
            },
            {
              name: "student6",
              GPA: "3.1"
            }
          ] 
        },
        {
          projectName: "Project 4",
          students: [
            {
              name: "student7",
              GPA: "3.0"
            },
            {
              name: "student8",
              GPA: "3.5"
            }
          ] 
        }
    ]
    }
  }


  renderTableData() {
    return this.state.groups.map((group, index) => {
       const { projectName } = group 
       return (
          <tr>
             <td>{projectName}</td>

          </tr>
       )
    })
 }

  render() {
    return (
      <Container>
        <Form>
          <Col>
            <h1>Groups</h1>
          </Col>
          <div>
          <table id='groups'>
               <tbody>
                  {this.renderTableData()} 
               </tbody>
            </table>
          </div>
        </Form>
      </Container>
    );
  }
}

export default ViewGroups;

Answer 1

You will need to render the student data for each group in some way. Something like this:

renderTableData() {
  return this.state.groups.map((group, index) => {
     const { projectName, students } = group 
     return (
        <tbody>
           <tr>
             <td>{projectName}</td>
           </tr>
           {students.map((student) => (
             <tr key={student.name}>
               <td>{student.name}</td>
             </tr>
           })
        </tbody>
     )
  })
}

and remove the wrapper tbody.

You'll have to move the columns around to match what you want, but this is the general idea to render the inner student data.