Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2017-08-27

Channels

#reagent
<
2017-08-27
>
sebastibe09:08:28

Hi all, I'm trying re-use the components from react-google-maps and implement the simple map example from the doc: https://tomchentw.github.io/react-google-maps/basics/simple-map However, I'm a blocked by the withGoogleMap Higher-Order Component (HOC) that wraps the GoogleMap component. I have tried to adapt the classes with Reagent and use them as follow: 

(def GoogleMap (adapt-react-class js/ReactGoogleMaps.GoogleMap))
(def withGoogleMap (adapt-react-class js/ReactGoogleMaps.withGoogleMap))

(defn Map [props]
  [withGoogleMap
   [GoogleMap props]])
in lieu of the following Javascript: 
const Map = withGoogleMap(props => (
  <GoogleMap
     {... props}
  >
  </GoogleMap>
));
Without success. (I get the following error withGoogleMap(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.). Not being very fluent in Javascript and Clojurescript interop, I might have missed something.

curlyfry10:08:44

I think withGoogleMap is just a function that returns a component given some input, not a component itself.

curlyfry10:08:41

So I'm guessing you should call it directly with parens instead of angle brackets, and lose the adapt-react-class in your withGoogleMap def.

sebastibe12:08:30

This is what I thought first but then I got the error cannot call a class as a function as withGoogleMap type is an object[Container]

lepistane11:08:43

i am trying to get my charts to show up once i click "get resuts' button

lepistane11:08:47

from this example

lepistane11:08:03

the thing is

lepistane11:08:08

i cant get it to work

lepistane11:08:20

charts just dont show up and there are no errors in console

lepistane11:08:01

but when i edit or just move anything from div that has height and width

gadfly36111:08:09

@lepistane that recipe only shows how to display the highchart when the component mounts. Try adding a :component-did-update lifecycle (assuming that your 'get results' button will swap! something in your ratom that will then in turn update your component)

lepistane11:08:10

i was thinking to get something like this working (sorry i dont know very much react)

lepistane11:08:14

get resutlls > sends request, gets data from server> handler puts that in reagent.session > i make component that works like if there is data in session show charts

lepistane12:08:57

(defn results []
  (r/create-class {:reagent-render results-render
                   :component-did-update results-did-mount
                   :component-did-mount results-did-mount}))

lepistane12:08:09

thank you so much!!