reactjs 中的 HTML 表行跨度

Question

im confuse when i using map and want to make table like this

with data

const arr =[{
no: 1,
name:'david',
fruit: 'apple',
type:[{ typeName:'red apple'},{typeName:'green apple'}]
},
{
no: 2,
name: 'david',
fruit: 'orange',
type:[{ typeName:'mandarin orange'},{typeName:'bergamot orange'}]
}
]

i already try, but i got stuck, i can only do like this

i confuse how to merge "david" in this table

Answer 1

I solved this issue. Please check this code

// App.js
import "./styles.css";
import React, { Fragment } from "react";

export default function App() {
  const arr = [
    {
      no: 1,
      name: "david",
      fruit: "apple",
      type: [{ typeName: "red apple" }, { typeName: "green apple" }]
    },
    {
      no: 2,
      name: "david",
      fruit: "orange",
      type: [{ typeName: "mandarin orange" }, { typeName: "bergamot orange" }]
    },
    {
      no: 3,
      name: "jason",
      fruit: "orange",
      type: [{ typeName: "mandarin orange" }, { typeName: "bergamot orange" }]
    }
  ];

  let namesArr = {};
  const rowSpan = arr.reduce((result, item, key) => {
    if (namesArr[item.name] === undefined) {
      namesArr[item.name] = key;
      result[key] = 1;
    } else {
      const firstIndex = namesArr[item.name];
      if (
        firstIndex === key - 1 ||
        (item.name === arr[key - 1].name && result[key - 1] === 0)
      ) {
        result[firstIndex]++;
        result[key] = 0;
      } else {
        result[key] = 1;
        namesArr[item.name] = key;
      }
    }
    return result;
  }, []);

  return (
    <div>
      <table>
        <tr>
          <th>no</th>
          <th>name</th>
          <th>fruit</th>
          <th>type</th>
        </tr>
        {arr.map((el, index) => (
          <tr>
            <td>{el.no}</td>
            {rowSpan[index] > 0 && <td rowSpan={rowSpan[index]}>{el.name}</td>}
            <td>{el.fruit}</td>
            <td style={{}}>
              {el.type.length &&
                el.type.map((ele, i) => (
                  <Fragment>
                    <tr
                      style={{
                        border: "none",
                        display: "flex",
                        flexWrap: "wrap"
                      }}
                    >
                      <td
                        style={{
                          border: "none",
                          width: "100%",
                          borderTop: i > 0 ? "1px solid black" : "none"
                        }}
                      >
                        {ele.typeName}
                      </td>
                    </tr>
                  </Fragment>
                ))}
            </td>
          </tr>
        ))}
      </table>
    </div>
  );
}

// styles.css
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}