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.

Answer 1

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>