Combine Array and a Nested Array in React

Question

I wanted to combine the parent array and its child array in one table. The child array should have background color of green.

I have a difficulty doing it?

Please check my codesandbox CLICK HERE

<TableBody>
      {[rows, rows?.personnels]
        .filter(Array.isArray)
        .flat()
        .map((row) => (
          <TableRow
            key={row.name}
            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
          >
            <TableCell>{row.fname}</TableCell>
            <StyledTableCell align="right">{row.mname}</StyledTableCell>
          </TableRow>
        ))}
    </TableBody>

Expected Output

The existing code-sandbox is applying green background to all cells in Mname column. Do you need both child elements to be background green and all Mname column elements to also have background green? — jsN00b
– jsN00b, Commented Feb 24, 2022 at 10:22
@jsN00b. Only Fname and Mname of Robert Williams and James Quincy to have a background of green. — Joseph
– Joseph, Commented Feb 24, 2022 at 10:30

Asad Haroon · Accepted Answer · 2022-02-24 10:32:11Z

1

Make an array which flattens your rows and their childrens too into single array. And add conditional fname and mname render for both cases handling in TableRow.

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell, { tableCellClasses } from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { styled } from "@mui/material/styles";

const StyledTableCell = styled(TableCell)(({ theme }) => ({
  [`&.${tableCellClasses.head}`]: {
    backgroundColor: "lightgreen"
  },
  [`&.${tableCellClasses.body}`]: {
    backgroundColor: "lightgreen"
  }
}));

const rows = [
  {
    id: "111",
    fname: "Thomas",
    mname: "James",
    personnels: [
      {
        id: 1234,
        person_id: "233",
        parent_id: "111",
        person: {
          id: "233",
          fname: "Robert",
          mname: "Williams"
        }
      }
    ]
  },
  {
    id: "222",
    fname: "Jane",
    mname: "Doe",
    personnels: [
      {
        id: 4567,
        person_id: "333",
        parent_id: "222",
        person: {
          id: "333",
          fname: "James",
          mname: "Quincy"
        }
      }
    ]
  }
];

export default function BasicTable() {
  const arr=[...rows,...rows.map((e)=>e.personnels).flat()];
  console.log(arr)
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Fname</TableCell>
            <TableCell>Mname</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
        {arr.map((row) => (
              <TableRow
                key={row?.fname || row?.person?.fname}
                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
              {row?.fname ? (
            <TableCell>{row?.fname}</TableCell>
          ) : (
            <StyledTableCell>{row?.person?.fname}</StyledTableCell>
          )}
                {row?.mname ? (
            <TableCell align="right">{row?.mname}</TableCell>
          ) : (
            <StyledTableCell align="right">
              {row?.person?.mname}
            </StyledTableCell>
          )}
              </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Code sandbox link: https://codesandbox.io/s/combine-array-and-string-in-mapping-in-react-forked-dnq0zc?file=/demo.js:36-2278

edited Feb 24, 2022 at 10:32

answered Feb 24, 2022 at 10:07

Asad Haroon

4923 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Joseph Over a year ago

I don't see Robert Williams and James Quincy in the table

Asad Haroon Over a year ago

Please open codesandbox link which I have attached its perfectly working

Joseph Over a year ago

Robert Williams James Quincy should all be background green, their Fname and Mname. the others should not be green

Asad Haroon Over a year ago

Now check sandbox again.

Joseph Over a year ago

There's still background of green on James and Doe?

|

Collectives™ on Stack Overflow

Combine Array and a Nested Array in React

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related