map marker fix

src/components/Mapbox.js

@@ -14,7 +14,7 @@ const Map = ReactMapboxGl({
 // 	{ id: 5, position: [100.679211, 13.826122], name: 'Fashion Island' },
 // ];
 
-export default class Mapbox extends React.PureComponent {
+export default class Mapbox extends React.Component {
 	state = {
 		center: undefined,
 		active: undefined,
@@ -22,14 +22,16 @@ export default class Mapbox extends React.PureComponent {
 		data: [],
 	};
 
-	componentDidUpdate = () => {
+	componentDidUpdate = (prevProps, prevState) => {
 		if (this.props.allDeviceInfo) {
-			let data1 = this.props.allDeviceInfo;
-			this.setState({
-				data: data1,
-				center: data1[0].position,
-				active: data1[0],
-			});
+			if (prevProps.allDeviceInfo !== this.props.allDeviceInfo) {
+				let data1 = this.props.allDeviceInfo;
+				this.setState({
+					data: data1,
+					center: data1[0].position,
+					active: data1[0],
+				});
+			}
 		}
 	};
 
@@ -48,6 +50,7 @@ export default class Mapbox extends React.PureComponent {
 					center={center}
 					zoom={zoom}
 					onClick={() => this.setState({ active: undefined })}
+					movingMethod="easeTo"
 				>
 					<Layer
 						style={{ cursor: 'pointer' }}
@@ -63,19 +66,20 @@ export default class Mapbox extends React.PureComponent {
 						{Object.keys(this.state.data).map((item, index) => (
 							<Feature
 								key={item}
+								style={{ cursor: 'pointer' }}
 								coordinates={this.state.data[item].position}
 								onMouseEnter={() =>
 									this.setState({
 										active: this.state.data[item],
 									})
 								}
-								onClick={() =>
+								onClick={() => {
 									this.setState({
 										center: this.state.data[item].position,
 										zoom: [10],
 										active: this.state.data[item],
-									})
-								}
+									});
+								}}
 							/>
 						))}
 					</Layer>
@@ -83,7 +87,7 @@ export default class Mapbox extends React.PureComponent {
 						<Popup
 							key={active.id}
 							coordinates={active.position}
-							onClick={() => console.log('change to ' + JSON.stringify(active))}
+							onClick={() => console.log('change to ' + active.name)}
 							style={{ cursor: 'pointer' }}
 						>
 							<div