I have been having this issue lately and I am not sure how to resolve it. I have two applications running at the same time. The first one is fetching APIs from vessel-finder and finding only a specific number of boats. The second application is the user interface used to visualize data from the fetch, specifically latitude and longitude of boats.
The error is below
This is the answer of the API:
[
{
"AIS":{
"MMSI":227441980,
"TIMESTAMP":"2017-08-11 11:17:37 UTC",
"LATITUDE":46.1459,
"LONGITUDE":-1.16631,
"COURSE":360.0,
"SPEED":0.0,
"HEADING":511,
"NAVSTAT":1,
"IMO":0,
"NAME":"CLEMENTINE",
"CALLSIGN":"FJVK",
"TYPE":60,
"A":0,
"B":0,
"C":0,
"D":0,
"DRAUGHT":0.0,
"DESTINATION":"",
"ETA_AIS":"00-00 00:00",
"ETA":"",
"SRC":"TER",
"ZONE": "North Sea",
"ECA": true
}
}
]
This is the code I am using and where the problem seems to be:
ShipTracker.js
import React from 'react';
import { Table } from 'reactstrap';
const shipCompanyMap = {
MICHIGAN: 'DONJON',
ATLANTIC SALVOR': 'DONJON',
STUYVESANT: 'DUTRA'
};
const Ship = ({ ship, logoMap, logoClick }) => {
const shipName = ship.AIS.NAME;
const company = shipCompanyMap[shipName];
const img = logoMap[company && company.split(' ').join('').toUpperCase()];
return (
<div onClick={(event) => logoClick(event, ship)}>
{/* Render shipImage image */}
<img src={img} alt="Logo" />
</div>
);
};
export { Ship };
const ShipTracker = ({ ships, setActiveShip }) => {
console.log('These are the ships: ', { ships });
return (
<div className="ship-tracker">
<Table className="flags-table" responsive hover>
<thead>
<tr>
<th>#</th>
<th>MMSI</th>
<th>TIMESTAMP</th>
<th>LATITUDE</th>
<th>LONGITUDE</th>
<th>COURSE</th>
<th>SPEED</th>
<th>HEADING</th>
<th>NAVSTAT</th>
<th>IMO</th>
<th>NAME</th>
<th>CALLSIGN</th>
</tr>
</thead>
<tbody>
{ships.map((ship, index) => {
// const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
// const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
const {
MMSI,
TIMESTAMP,
LATITUDE,
LONGITUDE,
COURSE,
SPEED,
HEADING,
NAVSTAT,
IMO,
NAME,
CALLSIGN
} = ship;
const cells = [
MMSI,
TIMESTAMP,
LATITUDE,
LONGITUDE,
COURSE,
SPEED,
HEADING,
NAVSTAT,
IMO,
NAME,
CALLSIGN
];
return (
<tr
onClick={() => setActiveShip(ship.AIS.NAME, ship.AIS.LATITUDE, ship.AIS.LONGITUDE)}
key={index}
>
<th scope="row">{index}</th>
{cells.map((cell) => <td key={ship.AIS.MMSI}>{cell}</td>)}
</tr>
);
})}
</tbody>
</Table>
</div>
);
};
export default ShipTracker;
Here on GoogleMap.js is where I render the images on google-map:
render() {
return (
<div className="google-map">
<GoogleMapReact
bootstrapURLKeys={{ key: 'My_KEY' }}
center={{
lat: this.props.activeShip ? this.props.activeShip.latitude : 37.99,
lng: this.props.activeShip ? this.props.activeShip.longitude : -97.31
}}
zoom={5.5}
>
{/* Rendering all the markers here */}
{this.state.ships.map((ship) => (
<Ship
ship={ship}
key={ship.AIS.MMSI}
lat={ship.AIS.LATITUDE}
lng={ship.AIS.LONGITUDE}
logoMap={this.state.logoMap}
logoClick={this.handleMarkerClick}
/>
))}
</GoogleMapReact>
</div>
);
}
What I tried so far:
1) I tried to modify the how the cells in the Table are passed/read hoping to fix at the same time the variable.map is not a function issue. Below the additional trial I tried but also that did not work:
const ShipTracker = ({ ships, setActiveShip }) => {
console.log('These are the ships: ', { ships });
return (
<div className="ship-tracker">
<Table className="flags-table" responsive hover>
<thead>
<tr>
<th>#</th>
<th>MMSI</th>
<th>TIMESTAMP</th>
<th>LATITUDE</th>
<th>LONGITUDE</th>
<th>COURSE</th>
<th>SPEED</th>
<th>HEADING</th>
<th>NAVSTAT</th>
<th>IMO</th>
<th>NAME</th>
<th>CALLSIGN</th>
</tr>
</thead>
<tbody>
{ships.map((ship, index) => {
// const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
// const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
// const {
// MMSI,
// TIMESTAMP,
// LATITUDE,
// LONGITUDE,
// COURSE,
// SPEED,
// HEADING,
// NAVSTAT,
// IMO,
// NAME,
// CALLSIGN
// } = ship;
const cells = [
ship.AIS.MMSI,
ship.AIS.TIMESTAMP,
ship.AIS.LATITUDE,
ship.AIS.LONGITUDE,
ship.AIS.COURSE,
ship.AIS.SPEED,
ship.AIS.HEADING,
ship.AIS.NAVSTAT,
ship.AIS.IMO,
ship.AIS.NAME,
ship.AIS.CALLSIGN
];
return (
<tr
onClick={() => setActiveShip(ship.AIS.NAME, ship.AIS.LATITUDE, ship.AIS.LONGITUDE)}
key={index}
>
<th scope="row">{index}</th>
{cells.map((cell) => <td key={ship.AIS.MMSI}>{cell}</td>)}
</tr>
);
})}
</tbody>
</Table>
</div>
);
2) I also came across this source and this other source, this one and this too.
I read this also. However, neither of these has helped me fix the problem.
What am I doing wrong that is preventing me from correctly compiling the project? Thank you very much for pointing to the right direction for solving this issue.
