Fork me on GitHub
#reagent
<
2017-02-20
>
stammi15:02:09

We don't seem to be able to do (.-offsetWidth (.getElementById js/document "foo")) in a reagent component. We keep getting sth like react.inc.js:7864 Uncaught TypeError: Cannot read property '__reactInternalInstance$izyiy1nbjzhmku0kvbb0m5cdi' of null

stammi15:02:23

anybody seen this before?

kauko15:02:56

Quick look at our code and we do something like this (.-offsetWidth (aget (.-childNodes (reagent/dom-node this)) 0)))

kauko15:02:04

Could be that you don't want the childNodes, but I'm guessing you need to use (dom-node this), not getElementById

kauko15:02:14

But I'm just guessing

pesterhazy15:02:17

@stammi my guess is that this has nothing to do with react

pesterhazy15:02:38

unless "#foo" is a react component?

pesterhazy15:02:09

in which case you should use a "callback ref" to access the comp, not getElementById

stammi16:02:42

thanks @kauko and @pesterhazy . Our problem was calling that code in the render fn, so it was called before the stuff was actually rendered

stammi16:02:17

this did the trick for us

pesterhazy17:02:06

glad it works for you but it's still not the recommended way to access DOM elements in a React app

pesterhazy17:02:54

by definition, the render fn will be called before the component is mounted, i.e. before the dom node is created

pesterhazy17:02:45

to access attributes of the dom node, it's better to use component-did-mount or a ref callback, both of which are guaranteed to be called only once the component is mounted

borkdude17:02:53

Does Reagent 0.6.0 work with React 15.4?

borkdude17:02:48

I want to use Reagent 0.6.0 with React 15.4 with addons

borkdude17:02:34

This seemed to work:

[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.4.2-2"]

borkdude17:02:58

Hmm, I have an issue with ReactDOMServer

borkdude17:02:16

This:

[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons “15.4.2-2”]
gives me: js/ReactDOM is missing

borkdude17:02:26

With global exclusions and explicitly depending on react-dom and react-dom-server it works

scknkkrer20:02:26

Guys, I need help. I have to implement a dashboard. But, I wanna use clojure/clojurescript for this. I have a template for this job. But I couldn’t make it work. I have translated html to hiccup, but template-in jquery functions doesn’t work. What have I missed ? Template I tried to implement: https://github.com/puikinsh/gentelella Thanks for your help from now.

pesterhazy20:02:22

> Gentelella Admin is a free to use Bootstrap admin template. This template uses the default Bootstrap 3 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

pesterhazy20:02:39

this is a red flag - react and jQuery plugins generally don't mix well

pesterhazy20:02:51

unless you want to use it without react?

kauko22:02:17

I find it near impossible to help you without code samples @scknkkrer