reactのrender内でmapを使ってchild componentをループさせる時に気を付ける事…

react-native-mapsを使ってMarkerを表示しようとしたんだけど、何度やっても表示されない。
chromeのconsole内では確かにmarkerがループで回っている。
何でだと悩み続けて4日程…

答えは物凄く簡単だった。

render() {
    <MapView
        ~省略~
    >
        {this.state.children.map(child => {
          <Marker 
            key={child.id}
            coordinate={child.LatLng}  
            title={child.name}
          />
        })}
    </MapView>
}

これだと表示されない。
理由はMarkerをreturnしていないから…。

render() {
    <MapView
        ~省略~
    >
        {this.state.children.map(child => {
          return <Marker  // ←この行のreturn!!
            key={child.id}
            coordinate={child.LatLng}  
            title={child.name}
          />
        })}
    </MapView>
}

正解はこれ！

Rendering a list of markers on a map

これを参考に書いてたんだけど、typescriptの場合？なのかはもう良く分からんけど、returnを書かないと出力されないのだった。

もう本当にしょうもないミスで嫌になったけど、androidもiphoneも同じように表示されて嬉しすぎるので、これで前に進もうと思う。