Combine Array and String in Mapping in React

Question

I need to combine rows and rows2. If either of them don't have a value, their values is "none". How do I combine them? The problem now is that its creating multiple rows that is empty.

Codesandbox CLICK HERE

    <TableBody>
      {[...(rows || []), ...(rows2 || [])].map((row) => (
        <TableRow
          key={row.name}
          sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
        >
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
          <TableCell align="right">{row.calories}</TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))}
    </TableBody>

Well, what does const a = "none"; console.log(...a) print? — windowsill
– windowsill, Commented Jan 8, 2022 at 4:58
Hey Joseph, will rows2 always be a string? You are spreading the string in as a character array. Can you clarify what you want to "combine"? From what I can tell you are are iterating one and then iterating the other. Is that all you want to do, or do you want to "merge" any of the row data? Can you provide an example expected output? — Drew Reese
– Drew Reese, Commented Jan 8, 2022 at 5:28
@DrewReese. No rows and rows2 will not always be a string. If they have a value they will return to an array, if they don't have a value, they will return to a string "none". I want to combine rows and rows2 to iterate them into the table. rows and rows2 have the same data structure. — Joseph
– Joseph, Commented Jan 8, 2022 at 5:34
@DrewReese. When rows have values while rows return "none", then only iterate rows in the table and vice versa. If both have values of "none", then don't iterate them in the table. — Joseph
– Joseph, Commented Jan 8, 2022 at 6:08

Drew Reese · Accepted Answer · 2022-01-08 06:08:13Z

1

The issue is that you are spreading the string value "none" into a character array and then mapping this to rows. This results in four empty rows corresponding to ["n", "o", "n", "e"].

Assuming you just want to combine the two "array" values that are possibly sometimes a string, and only render the rows that actually have row data, copy the rows and rows2 values into the array (not spread), run the array through a filter function to ensure only array type values are passed through, flatten the array of arrays down to a single array, and then map.

{[rows, rows2]
  .filter(Array.isArray)
  .flat()
  .map((row) => (
    <TableRow
      key={row.name}
      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
    >
      <TableCell component="th" scope="row">
        {row.name}
      </TableCell>
      <TableCell align="right">{row.calories}</TableCell>
      <TableCell align="right">{row.fat}</TableCell>
      <TableCell align="right">{row.carbs}</TableCell>
      <TableCell align="right">{row.protein}</TableCell>
    </TableRow>
  ))}

answered Jan 8, 2022 at 6:08

Drew Reese

207k20 gold badges283 silver badges293 bronze badges

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

6 Comments

Joseph Over a year ago

Thank you. How can you make the background color of rows the fat column to green for example?

Drew Reese Over a year ago

@Joseph You can create a styled component, see updated sandbox link. I just borrowed from one of the table examples in the docs, but you can get much fancier with the styling.

Joseph Over a year ago

Thanks Drew. but I would like to apply only to the body and also for the rows not rows2 if rows2 have a data

Drew Reese Over a year ago

@Joseph You don't need to specify any styling for the tableCellClasses.head head class if you don't want to. So you are only wanting to style the cells if the data is from the rows array?

Joseph Over a year ago

Yes if coming from rows array only.

|

jsejcksn · Accepted Answer · 2022-01-08 05:00:51Z

You can use the syntax for result below. Just replace the map callback function with whatever you want:

const rows = [
  {
    name: "frozen yogurt",
    calories: 22,
    fat: 33,
    carbs: 44,
    protein: 44
  },
  // ...
];

const rows2 = "none";

const result = [...(Array.isArray(rows) ? rows : []), ...(Array.isArray(rows2) ? rows2 : [])]
  .map(row => /* whatever you want here, but I'll use */ row);

console.log(result);

Or you can make a function and re-use it:

function arrayValueOrEmptyArray (value) {
  return Array.isArray(value) ? value : [];
}

const rows = [
  {
    name: "frozen yogurt",
    calories: 22,
    fat: 33,
    carbs: 44,
    protein: 44
  },
  // ...
];

const rows2 = "none";

const result = [...arrayValueOrEmptyArray(rows), ...arrayValueOrEmptyArray(rows2)].map(row => row);

console.log(result);

Collectives™ on Stack Overflow

Combine Array and String in Mapping in React

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related