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
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;
}
