Что здесь не так? Компонент с тройной внутри

Question

    export const Date = ({ startDate, endDate, displayInUserTime }) => {
    const parsedStartDate = moment.utc(startDate).format("ll");
    const parsedEndDate = moment.utc(endDate).format("ll");
    const parsedLocalStartDate = moment(startDate).format("ll");
    const parsedLocalEndDate = moment(endDate).format("ll");

    return (
        <Content column className="col-1">
            {displayInUserTime ? 
            (<div>{parsedStartDate}</div>
            {parsedStartDate !== parsedEndDate && <div>{parsedEndDate}</div>}) 
            :
            (<div>{parsedLocalStartDate}</div>
            {parsedLocalStartDate !== parsedLocalEndDate && <div>{parsedLocalEndDate}</div>})}
        </Content>
    );
};

Ошибка: ошибка синтаксического анализа: неожиданный токен, ожидается ","

33 | {displayInUserTime? 34 | ({parsedStartDate}

35 | {parsedStartDate! == parsedEndDate && {parsedEndDate}}) | ^ 36 | : 37 | ({parsedLocalStartDate} 38 | {parsedLocalStartDate! == parsedLocalEndDate && {parsedLocalEndDate}})}

Answer 1

Вы возвращаете несколько элементов в {} упрощенном коде выглядит как bool?<one/><two/>:<three/><four/> другой ответ изменяет код на операторы if, но вы можете обернуть свой троичный элемент в React.Fragment: bool?<><one/><two/></>:<><three/><four/></>

Ваш код может быть:

<Content column className="col-1">
  {displayInUserTime ? (
    <>
      <div>{parsedStartDate}</div>
      {parsedStartDate !== parsedEndDate && (
        <div>{parsedEndDate}</div>
      )}
    </>
  ) : (
    <>
      <div>{parsedLocalStartDate}</div>
      {parsedLocalStartDate !== parsedLocalEndDate && (
        <div>{parsedLocalEndDate}</div>
      )}
    </>
  )}
</Content>

Answer 2

Вместо того, чтобы создавать интеллектуальные игры с тернарным оператором, как насчет того, чтобы вы использовали оператор if else

  let startDate = null;

  if(displayInUserTime) {
    startDate = <>
      <div>{parsedStartDate}</div>
      {parsedStartDate !== parsedEndDate && <div>{parsedEndDate}</div>}
    </>;
  }else {
    startDate = <>
      <div>{parsedLocalStartDate}</div>
      {parsedLocalStartDate !== parsedLocalEndDate && <div>{parsedLocalEndDate}</div>}
    </>
  }

  return (
        <Content column className="col-1">
            {startDate}
        </Content>
    );