React - 如何在三元運算符中包含動態變量

Question

在JSX中，如何使用三元運算符包含動態變量？下面的JSX會給出意想不到的令牌錯誤，但是如果我用文字代替R，它會起作用。

let cardIDs = this.props.cards.map(x => <li key={x.title}> 
{this.state.showName ? {x.title} : "S"} 
</li>); 

Answer 1

刪除{}

{ this.state.showName ? x.title : "S" } 
         ^^  ^^