使用reactjs创建表时如何删除行中重复的数据条目

Question

Sorry for the bad title, but I'm not sure how to google this issue. For what ever reason, I'm having trouble wrapping my head around about how to create this table in reactjs. Where XX under column1 is empty while the data in column two will continue to populate.

Pretty much this is what I want: where xx is blank

   column 1    column 2

1. David       Male
   xx          30
   xx          BasketBall
2. Sam         BaseBall
3. John        Male
   xx          Football

I'm trying to do this with reactjs and material-ui.

my data format :

[
 ['David', ['Male', '30', 'BasketBall']],
 ['Sam', ['BaseBall']],
 ['John', ['Male', 'FootBall']]
]

This is a snippet of my code:

    <TableBody>
//this will display 1 row for 1 item as in number 2 mentioned above.
              {data.map((prop, key) => {
                if (prop[1].length <= 1) {
                  return (
                    <TableRow key={key}>
                      {prop.map((prop, key) => {
                        return (
                          <TableCell className={classes.tableCell} key={key}>
                            {prop}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  );
                } else {

//this is where I'm stuck at
                  return (
                    <TableRow key={key}>
                      {prop.map((prop, key) => {
                        return (
                          <TableCell className={classes.tableCell} key={key}>
                            {prop}
                          </TableCell>
                        );
                      })}
                    </TableRow>
                  );
                }
              })}
            </TableBody>

Answer 1

One solution is to check if the value is an array. If so map each array value into a div (to display them line-by-line). Else, just output prop .

I've added an inline style for vertical-align: top however you may want to move that to your CSS file.

//this is where I'm stuck at
return (
    <tr key={key}>
        {prop.map((prop, key) => (
            <td
                key={key}
                style={{verticalAlign: 'top'}}
            >
                {Array.isArray(prop) && prop.map((prop, key) => (
                    <div key={key}>{prop}</div>
                ))
                || prop}
            </td>
        ))}
    </tr>
);

Answer 2

I would transform my data so it's ready to be rendered without much trouble.

Here's how I would do it:

const tabularizeData = data =>
  data.reduce((acc, item, index) => {
      let curName;
      const name = item[0]
      const stuff = item[1]

      for (const i in stuff) {
        const thing = stuff[i]
          if (i > 0) {
            acc.push(['', '', thing])
          } else {
            acc.push([index, name, thing])
          } 
      }
      return acc
}, [])

Which would transform your data like this:

const data = [
  ['David', ['Male', '30', 'BasketBall']],
  ['Sam', ['BaseBall']],
  ['John', ['Male', 'FootBall']]
]

tabularizeData(data)

[
  [0, "David", "Male"]
  ["", "", "30"]
  ["", "", "BasketBall"]
  [1, "Sam", "BaseBall"]
  [2, "John", "Male"]
  ["", "", "FootBall"]
]

And now creating your table should be easy. Hope this helps!