Using ternary operator inside map using which I want to change column width of material table

Question

I'm trying to change column widths based on the ids received from the map function. Here is the code:

<TableRow>
                        {
                            tableData.header.map(header => {
                                header.id === "name" ? 
                                (<TableCell style={{width: 100}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                                :
                                (<TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                            })
                        }
</TableRow>

But I'm getting an error on this line:

header.id === "name" ?

The error being shown is: "Expected an assignment or function call and instead saw an expression no-unused-expressions"

Where am I going wrong?

I've tried adding return before TableCell in both cases bit it gives an error.

I tried adding return before TableCell but it's giving an error. I'm new to react by the way. — Amit, Dec 09 '20 at 06:16

Drew Reese · Accepted Answer · 2020-12-09T06:55:01.053

Arrow functions with a body may require an explicit return statement if the function is to return a value. Arrow functions without a body (i.e. no {}) have an implicit return.

Solution

Return the entire ternary expression.

<TableRow>
  {tableData.header.map((header) => {
    return header.id === "name" ? ( // <-- return entire ternary expression
      <TableCell style={{ width: 100 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    ) : (
      <TableCell style={{ minWidth: 185 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

This is still a lot of duplicated code, it could be more DRY. Move the ternary to branch logic on the minimal amount of code. The only diff I see if the width value, so branch there.

<TableRow>
  {tableData.header.map((header) => {
    return (
      <TableCell
        style={{ width: header.id === "name" ? 100 : 185 }}
        align="center"
        key={header.id}
      >
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

Loved the 2nd solution. I had actually tried that previously but had got syntax error. The reason for that was because inside style I was first checking the condition before assigning width. Thanks for both these detailed solutions but I solved on my own eventually :) — Amit, Dec 09 '20 at 07:00
@Amit Yes, it seems you stumbled upon the implicit return. Cheers. — Drew Reese, Dec 09 '20 at 07:07

score 0 · Answer 2 · answered Dec 09 '20 at 06:49

So I solved it by using this code:

<TableRow>
                        {
                            tableData.header.map(header => header.id === "name" ? 
                                <TableCell style={{minWidth: 80}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                                :
                                <TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                            )
                        }
</TableRow>

I basically removed some of the curly braces and somehow got the solution.

Using ternary operator inside map using which I want to change column width of material table

2 Answers2

Solution