map function in react

function NameList() {
	const names = ['Bruce', 'Clark', 'Diana']
    return (
    	<div>
      {names.map(name => <h2>{name}</h2>)}
      	</div>
    )
}

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

{this.state.data.map((person) => <TableRow key = {shortid.generate()} data = {person} />)}

import React from 'react'import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';class Map extends React.Component {  render() {    return (      <LeafletMap        center={[50, 10]}        zoom={6}        maxZoom={10}        attributionControl={true}        zoomControl={true}        doubleClickZoom={true}        scrollWheelZoom={true}        dragging={true}        animate={true}        easeLinearity={0.35}      >        <TileLayer          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'        />        <Marker position={[50, 10]}>          <Popup>            Popup for any custom information.          </Popup>        </Marker>      </LeafletMap>    );  }}export default Map

<style>.leaflet-container {    height: 400px;    width: 800px;}</style>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">