Fork me on GitHub
#reagent
<
2021-09-27
>
Franklin12:09:10

hello 👋 ... also trying to do some React interop here. ran into an issue

Franklin12:09:19

here's what the react code looks like

const Map = ReactMapboxGl({
  accessToken:
    'pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A'
});

// in render()
<Map
  style=""
  containerStyle={{
    height: '100vh',
    width: '100vw'
  }}
>
  <Layer type="symbol" id="marker" layout={{ 'icon-image': 'marker-15' }}>
    <Feature coordinates={[-0.481747846041145, 51.3233379650232]} />
  </Layer>
</Map>;

Franklin12:09:50

here's what my code looks like

(defn map-component
  []
  (let [token "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
        Map (ReactMapboxGl (clj->js {"accessToken" token}))]
    [:> Map {:style ""
             :accessToken token
             :containerStyle {:height "100vh"
                              :width "100vh"}}]))

Franklin12:09:24

I get this error

mapbox-gl.js:33 Uncaught Error: An API access token is required to use Mapbox GL. See 
    at t.RequestManager._makeAPIURL (mapbox-gl.js:33)
    at t.RequestManager.normalizeStyleURL (mapbox-gl.js:33)
    at Ze.loadURL (mapbox-gl.js:37)
    at Map._updateStyle (mapbox-gl.js:37)
    at Map.setStyle (mapbox-gl.js:37)
    at new Map (mapbox-gl.js:37)
    at ReactMapboxGl.componentDidMount (map.js:122)
    at commitLifeCycles (react-dom.development.js:20664)
    at commitLayoutEffects (react-dom.development.js:23427)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3946)

Franklin12:09:35

I've looked really long, not sure what I'm doing wrong

Franklin12:09:50

actually, I think I figured it out

Franklin12:09:47

had to wrap the props passed to Map in a clj->js

p-himik12:09:19

That still doesn't look right, even if it works. • The original JS code doesn't pass the token to Map - only to ReactMapboxGl • Reagent already converts CLJS maps to JS property objects for you Have you tried changing the above CLJS code by simiply removing :accessToken from the Map properties? Also, you don't have to use clj->js with shallow objects that are known at compile time - you can just use the #js reader tag.

afleck19:09:41

is it possible to use react’s forwardRef in a reagent component? https://reactjs.org/docs/forwarding-refs.html

p-himik19:09:09

Yes, a quick search in the Reagent repo shows that there's an example that uses it: https://github.com/reagent-project/reagent/tree/c214466bbcf099eafdfe28ff7cb91f99670a8433/examples/react-mde