1- import React , { Component , Fragment } from 'react' ;
1+ import React , { Component } from 'react' ;
22import PropTypes from 'prop-types' ;
33import isEmpty from 'lodash.isempty' ;
44
@@ -30,7 +30,8 @@ const InfoWindow = (props) => {
3030 </ div >
3131 < div style = { { fontSize : 14 } } >
3232 < span style = { { color : 'grey' } } >
33- { place . rating } { ' ' }
33+ { place . rating }
34+ { ' ' }
3435 </ span >
3536 < span style = { { color : 'orange' } } >
3637 { String . fromCharCode ( 9733 ) . repeat ( Math . floor ( place . rating ) ) }
@@ -53,22 +54,22 @@ const InfoWindow = (props) => {
5354} ;
5455
5556// Marker component
56- const Marker = ( props ) => {
57+ const Marker = ( { show , place } ) => {
5758 const markerStyle = {
5859 border : '1px solid white' ,
5960 borderRadius : '50%' ,
6061 height : 10 ,
6162 width : 10 ,
62- backgroundColor : props . show ? 'red' : 'blue' ,
63+ backgroundColor : show ? 'red' : 'blue' ,
6364 cursor : 'pointer' ,
6465 zIndex : 10 ,
6566 } ;
6667
6768 return (
68- < Fragment >
69+ < >
6970 < div style = { markerStyle } />
70- { props . show && < InfoWindow place = { props . place } /> }
71- </ Fragment >
71+ { show && < InfoWindow place = { place } /> }
72+ </ >
7273 ) ;
7374} ;
7475
@@ -83,7 +84,7 @@ class MarkerInfoWindow extends Component {
8384
8485 componentDidMount ( ) {
8586 fetch ( 'places.json' )
86- . then ( response => response . json ( ) )
87+ . then ( ( response ) => response . json ( ) )
8788 . then ( ( data ) => {
8889 data . results . forEach ( ( result ) => {
8990 result . show = false ; // eslint-disable-line no-param-reassign
@@ -95,7 +96,7 @@ class MarkerInfoWindow extends Component {
9596 // onChildClick callback can take two arguments: key and childProps
9697 onChildClickCallback = ( key ) => {
9798 this . setState ( ( state ) => {
98- const index = state . places . findIndex ( e => e . id === key ) ;
99+ const index = state . places . findIndex ( ( e ) => e . id === key ) ;
99100 state . places [ index ] . show = ! state . places [ index ] . show ; // eslint-disable-line no-param-reassign
100101 return { places : state . places } ;
101102 } ) ;
@@ -105,25 +106,26 @@ class MarkerInfoWindow extends Component {
105106 const { places } = this . state ;
106107
107108 return (
108- < Fragment >
109+ < >
109110 { ! isEmpty ( places ) && (
110111 < GoogleMap
111112 defaultZoom = { 10 }
112113 defaultCenter = { LOS_ANGELES_CENTER }
113114 bootstrapURLKeys = { { key : process . env . REACT_APP_MAP_KEY } }
114115 onChildClick = { this . onChildClickCallback }
115116 >
116- { places . map ( place =>
117- ( < Marker
117+ { places . map ( ( place ) => (
118+ < Marker
118119 key = { place . id }
119120 lat = { place . geometry . location . lat }
120121 lng = { place . geometry . location . lng }
121122 show = { place . show }
122123 place = { place }
123- /> ) ) }
124+ />
125+ ) ) }
124126 </ GoogleMap >
125127 ) }
126- </ Fragment >
128+ </ >
127129 ) ;
128130 }
129131}
0 commit comments