How to display data from Mysql in a React table

Question

My main problem is that the data is entered in the table vertically, rather than horizontally in the appropriate columns.

<Table className="align-items-center table-flush" responsive>
              <thead className="thead-light">
                <tr>
              <th scope="col">Project</th>
              <th scope="col">Budget</th>
              <th scope="col">Interest</th>
              <th scope="col">Country</th>
              <th scope="col">Score</th>
              <th scope="col">Completion</th>
              <th scope="col" />
            </tr>
          </thead>
          <tbody>

                {tutorials &&
                  tutorials.map((tutorial, index) => (
                    <tr
                      className={
                        "list-group-item " + (index === currentIndex ? "active" : "")
                      }
                      onClick={() => setActiveTutorial(tutorial, index)}
                      key={index}
                    >
                      <td>{tutorial.title}</td>
                      <td>{tutorial.size}</td>
                      <td>{tutorial.country}</td>
                    </tr>
                  ))}


            <td className="text-right">
              <UncontrolledDropdown>
                <DropdownToggle
                  className="btn-icon-only text-light"
                  href="#pablo"
                  role="button"
                  size="sm"
                  color=""
                  onClick={e => e.preventDefault()}
                >
                  <i className="fas fa-ellipsis-v" />
                </DropdownToggle>
                <DropdownMenu className="dropdown-menu-arrow" right>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    Update
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    ...
                  </DropdownItem>
                  <DropdownItem
                    href="#pablo"
                    onClick={e => e.preventDefault()}
                  >
                    Delete
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
                </td>



                  </tbody>
                  </Table>

                  </Card>
                  </div>
                  </Row>


                  </Container>
                  </>
              );
                  }


                export default TutorialsList;

This is what I see...

I need to put data in the corret box, for example in the first line:

Project: pino Budget $ 2300 Country: Nigeria

Second line: Project: Franco Budget $ 4500 Country: Ghana

Answer 1

Have you try something like this??

...
            {tutorials &&
              tutorials.map((tutorial, index) => (
                <tr
                  className={
                    "list-group-item " + (index === currentIndex ? "active" : "")
                  }
                  onClick={() => setActiveTutorial(tutorial, index)}
                  key={index}
                >
                  <td>{tutorial.title}</td>
                  <td>{tutorial.size}</td>
                  <td>{tutorial.country}</td>
                  ...other fields
                </tr>
              ))}
...

Let me know if I get something wrong. Thanks.