Условно передать значение веб-компонентам

Question

Я работаю с Semantic-UI-реакции, но мой вопрос не ограничивается этой специальной структурой.

У меня есть следующий код:

export const renderInputField = function({ input, transparent, meta: { touched, error } }) {
  if (transparent) {
    return renderField(<Input transparent { ...input } />, touched, error);
  } else {
    return renderField(<Input { ...input } />, touched, error);
  }
}

, который в основном возвращает компонент (<Input>) в обоих случаях, и единственное различие заключается в значении, передаваемом этому компоненту: transparent

Можно ли избавиться от if-else и сделать что-то похожее на это:

return renderField(<Input {transparent?'transparent':undefined} { ...input } />, touched, error);

предыдущая строка кода завершается с ошибкой:

Unexpected token, expected ...

Я ищу что-то подобное, что можно сделать в одну строку.