I'm trying to insert Markers and Circles on a MapView in React-Native.When I insert these two together I receive the following error JSX expressions must have one parent element.
I've tried to insert only one of these, I received no errors but still nothing worked.I'm using a map in my array of data and using my flood.id as key, although this is an a string, so I don't know if this is an issue.
I printed in the console all the variables that I'm using inside the map and they were all there.
Here is my code:
interface Flood { id: string; userId: string; latitude: number; longitude: number; type: string; source: string; description: string; waterLevel: string; startDate: string; finishDate: string; status: boolean; range: number; reports: string[]; images: { path: string }; hazards: { type: string, status: true, };}export default function IncidentsMap({navigation}: { navigation: any }) { const [location, setLocation] = useState<Location>(); const [errorMsg, setErrorMsg] = useState<any>(null); const [floods, setFloods] = useState<Flood[]>([]); function handleNavigateToCreateIncident() { navigation.navigate('SelectIncidentLocation') } useEffect(() => { (async () => { let {status} = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setErrorMsg('Permission to access location was denied'); return; } let variable = await Location.getForegroundPermissionsAsync(); let location = await Location.getCurrentPositionAsync({accuracy: 6}); setLocation(location); api.get('floods').then(response => { setFloods(response.data); }) })(); }, []); function handleNavigateToIncidentDetails() { navigation.navigate('IncidentDetails'); } return (<View style={styles.container}> {typeof location?.coords.latitude == 'number' ?<View style={styles.container}><MapView provider={PROVIDER_GOOGLE} style={styles.map} initialRegion={{ latitude: location?.coords.latitude!, longitude: location?.coords.longitude!, latitudeDelta: 0.008, longitudeDelta: 0.008, }}> {floods.map(flood => { // noinspection BadExpressionStatementJS<Circle key={flood.id} center={{ latitude: flood.latitude, longitude: flood.longitude }} radius={flood.range} fillColor={'rgba(53, 159, 181,0.4)'} /><Marker key={flood.id} icon={mapMarker} calloutAnchor={{ x: 2.7, y: 0.8 }} coordinate={{ latitude: flood?.latitude, longitude: flood?.longitude }}><Callout tooltip={true} onPress={handleNavigateToIncidentDetails}><View style={styles.calloutContainer}><Text style={styles.calloutText}>{flood.type}</Text></View></Callout></Marker> })}</MapView><View style={styles.footer}><Text style={styles.footerText}>Reporte um incidente</Text><RectButton style={styles.createFloodButton} onPress={handleNavigateToCreateIncident}><Feather name='plus' size={20} color={'#fff'}/></RectButton></View><View style={styles.menuContainer}><RectButton style={styles.menuButton} onPress={() => navigation.toggleDrawer()}><Feather name='menu' size={20} color={'#fff'}/></RectButton></View></View> :<View style={styles.containerSkeleton}><ActivityIndicator size={50} color="#15c3d6"/></View>}</View> );}Edit:I've inserted the React.Component and the error stopped but still doesn't show on the map.
{floods.map(flood => { // noinspection BadExpressionStatementJS<React.Component key={flood.id}><Circle center={{ latitude: flood.latitude, longitude: flood.longitude, }} radius={Number(flood.range)} fillColor={'rgba(53, 159, 181,0.4)'} /><Marker icon={mapMarker} calloutAnchor={{ x: 2.7, y: 0.8 }} coordinate={{ latitude: flood?.latitude, longitude: flood?.longitude, }}><Callout tooltip={true} onPress={handleNavigateToIncidentDetails}><View style={styles.calloutContainer}><Text style={styles.calloutText}>{flood.type}</Text></View></Callout></Marker></React.Component> })}