三元运算符：需要赋值或函数调用，而看到的是表达式

Question

I am trying to map an array of typescript interface objects and print its values in a table. My array looks something like this:

export interface data {
                fields?: field[];
            }

export interface field {
                name: string;
                description: string;
                subfields: subfield[];
            }

But I want to print only that field which has field.name equal to requiredName

On usage of ternary operator to define condition I am getting the following error: Expected an assignment or function call and instead saw an expression

I would appreciate some help in defining conditional statements to map my object. I have used ternary operator before too but only for printing value in a table cell instead of dynamically creating one.

Here´s my code so far:

           <Table>
            <TableBody>
              <TableRow >
                <TableCell>
                {props.fields.map((it) =>
                  {it.name===requiredName ? (
                    <Table>...</Table>
                  ) : (
                    null
                  )}
                )} 
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>

Thanks in advance.

Answer 1

You are missing the return statement in front of your ternary operator.

It should be:

return it.name===requiredName ? (
                    <Table>...</Table>
                  ) : (
                    null
                  )

Answer 2

You have curly brackets in your arrow function, and therefore your ternary operator is executed as statement in the function body, but not returned.

This is what you currently have: (I just added the implicit return undefined to the function body.)

<TableCell>
  {props.fields.map((it) => {
    it.name===requiredName ? (<Table>...</Table>) : (null)
    return undefined
    }
  )} 
</TableCell>

The result of you map function is therefore an array with only undefined values in there.

You probably meant to do this (Note the absent curly brackets, which cause the arrow function to return the value of the ternary):

<TableCell>
  {props.fields.map((it) => 
    it.name===requiredName ? (<Table>...</Table>) : (null)
  )} 
</TableCell>