I have some code that returns a tr element.

const credentialRows = credentials.map((credential_record) => {
    if (
      logic...
    ) {
      const credential_id = credential_record.credential_exchange_id
      const credentialState = credential_record.state.replaceAll('_', ' ') || ''
      const dateCreated =
        new Date(credential_record.created_at).toLocaleString() || ''

      let credentialName = ''
      if (
        credential_record.credential_proposal_dict !== null &&
        credential_record.credential_proposal_dict !== undefined
      ) {
        credentialName = credential_record.credential_proposal_dict.schema_name.replaceAll(
          '_',
          ' '
        )
      }
      return (
        <DataRow
          key={credential_id}
          onClick={() => {
            openCredential(history, credential_id)
          }}
        >
          <DataCell>{credentialName}</DataCell>
          <DataCell className="title-case">{credentialState}</DataCell>
          <DataCell>{dateCreated}</DataCell>
        </DataRow>
      )
    } // missing else here...
  })

The tr is a child of tbody.

<tbody>{credentialRows}</tbody>

It works without issues, however I get the ESLint warning that says

Expected to return a value at the end of arrow function

When I try to return an empty string it yells at me because it can't be empty. But if I try to return just an empty dataRow it asks me to give it a key, which I don't have for a dummy default element.

What is the best way to go about creating an empty tr on else?

CodePudding user response：

What about if you return null?

CodePudding user response：

{credentialRows} ? {credentialRows} : ""

CodePudding user response：

Return <></> after the if block. That way you have covered the !logic situation. Or you move the if logic out of .map().