I’m using react-leaflet to render a map. I created a component that has a map-property:
import * as React from 'react';
import { Map, FeatureCollection } from 'leaflet';
class Car extends React.Component {
state = {
map: Map,
collection: FeatureCollection
}
constructor(props) {
super(props);
this.state = {
map: props.map,
collection: props.collection
}
}
Now I try to use that component within my app:
import React, { useState } from 'react';
import { MapContainer, useMap } from 'react-leaflet';
import Car from './Car';
function Layout() {
return (
<div>
<MapContainer bounds={[[52.475,13.3], [52.477,13.5]]} zoom={12}>
<Car map={ useMap() }/>
</MapContainer>
</div>
)
}
export default Layout;
However I don’t know how to provide the map from the MapContainer
into my Car
-component. Using the above code I get the following error:
TS2322: Type ‘{ map: string; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>’.
Property ‘map’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}> & Readonly<{ children?: ReactNode; }>’.