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>
    )
  }
}