React jsx-为map函数内部的条件渲染获取意外的令牌错误

Question

我试图在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}`}
            >

但是，我得到了错误：

  

意外的令牌，预期的，

为什么会出现此错误，该如何解决？