React jsx-获取映射函数内条件呈现的意外标记错误

我试图在render函数的map函数中加入一些条件逻辑。我正在呈现一个选项卡,并想检查表是否需要标题,以及是否只需要呈现它。这就是我要做的部分:

const tableTitle = receiver.receiverType === receiverTypes.ARBG ? receiver.receiverNumber : null;
          return (
            { tableTitle }

const AccountingTable = ({ result, toggleDetails, showDetails }) => {
  const rangeOfMonths = getRangeOfMonths(
    result.periodFrom,
    result.nexPeriodTo ? result.nexPeriodTo: result.periodeTo,
  );
  return (
    <div className={styles.table}>
      {
        result.periodsPerReceiver.map((receiver, receiverIndex) => {
          const tableTitle = receiver.receiverType === receiverTypes.ARBG ? receiver.receiverNumber : null;
          return (
            { tableTitle }
            <Table
              headerTextCodes={getHeaderCodes(
                showCollapseButton(receiver.resultatPerField),
                { toggleDetails, showDetails: showDetails[mottakerIndex] ? showDetails[receiverIndex].show : false, receiverIndex},
                rangeOfMonths,
                result.nexPeriodTo,
              )}
              allowFormattedHeader
              key={`tableIndex${receiverIndex+ 1}`}
            >

但是,我得到了一个错误:

意外的标记,应为,

为什么,我会犯这个错误,我该怎么解决?