React mapをつかってリストを作る

配列データの要素分のリストを作りたい場合は、JSX内でmapを用いて展開するパターンとrenderメソッド内でmapを用いて展開したリストを変数に格納し、JSX内で展開するパターンがある。


JSX内パターン

class App extends React.Component {

constructor(props) {
super(props)
this.state={
colors: ["red","orange","black","green","blue","white"]
}
}
render(){
return(
<div>
<ul>
{this.state.colors.map( c =>
<li>{c}</li>
)}
</ul>
</div>
)
}
}


renderメソッド内パターン


class App extends React.Component {
constructor(props) {
super(props)
this.state={
colors: ["red","orange","black","green","blue","white"]
}
}
render(){
const colorsDOM = this.state.colors.map(c => <li>{c}</li>)
return(
<div>
<ul>
{colorsDOM}
</ul>
</div>
)
}
}