キーワード†
- React
- 条件分岐 (if)
- 繰り返し (for)
したいこと†
Reactで条件分岐や繰り返しをして描画したい。
どうやって†
普通に条件分岐と繰り返しをする（！？）。
条件分岐†
const ResultLabel = ({state}) => (
<div>
Result:
<span>
{
state.showingResult
? state.resultValue
: state.inputValue
}
</span>
</div>
)
繰り返し†
const HistoryList = ({state}) => (
<div>
<ul>
{
state.resultHistory.map(result => (
<li key={result.id}>{result.value}</li>
))
}
</ul>
</div>
)
ちなみに†
「{}」の中で変数や配列を置いてやれば、その変数の値や配列の要素の値を書いてくれます。if文やfor文を使おうとすると即時関数でreturnする必要があるのでちょっと手間です。ので、三項演算子やArray.prototype.map()を使う方がシュッとします。
「()」でJSX要素が返却できるのはなんでかっていうと、ラムダ式になっているからなだけですね。
なお、繰り返し中に「key」を指定しないと「ユニークなkeyをもつべし」と怒られますので注意。