Fork me on GitHub
#reagent
<
2017-08-10
>
lepistane16:08:51

i've got json like this

lepistane16:08:14

having done jquery i wanted to write questions and answers using reagent

lepistane16:08:24

i made these functions

lepistane16:08:22

this is html and i expected it to be name = "38" value = "96"

lepistane16:08:26

what am i doing wrong?

manutter5116:08:15

Maybe just wrap q-id and id in a str?

lepistane16:08:05

tried that. value and name still are 'tagged value..."

juhoteperi16:08:07

TaggedValue sounds like a problem with transit decoding

juhoteperi16:08:16

So check the place where you are getting the questions data and validate if the types are correct there

juhoteperi16:08:33

js/console.log should work great, if you have cljs-devtools

noisesmith17:08:24

if you are using reagent, it would make more sense to use this one https://github.com/cognitect/transit-cljs

juhoteperi17:08:36

transit-cljs builds on top of transit-js

jfntn17:08:08

I’ve a reaction that recomputes from js/undefined to null, but that doesn’t cause the components to update

jfntn17:08:36

If the update is non-nil it works as expected

jfntn17:08:52

I don’t see anything in the reagent impl that could cause that behavior

pesterhazy17:08:14

(= nil js/undefined)
true

jfntn18:08:11

hmmm, is this where that applies?

jfntn18:08:13

;; impl of _run
        (when-not (or (nil? watches)
                      (= oldstate res))
          (notify-w this oldstate res)))

jfntn18:08:13

Was initially looking at _handle-change

jfntn18:08:25

k that makes sense, thanks @pesterhazy

lepistane18:08:58

i tried my best to make it happen

lepistane18:08:08

maybe i am doing something fundamentaly wrong

lepistane18:08:36

@juhoteperi i've used console log i am getting transit

lepistane18:08:32

i though that was the problem. so i started returning map and then use transit VM12870:1 Uncaught SyntaxError: Unexpected token ( in JSON at position 0 at JSON.parse (<anonymous>)

lepistane18:08:30

yep cant make it work

lepistane18:08:33

i will try to make it happen tomorrow

lepistane18:08:37

tnx for help

borkdude18:08:02

Is Reagent 0.7 also supposed to work with React 15.6 or is it locked to a specific version?

lepistane18:08:46

@borkdude Reagent 0.6.1 has a new version of React (15.4.0), and it fixes a bug with :ref attributes on input elements: #259.

borkdude18:08:23

That’s great. What happens if I provide a newer version of React?

yedi18:08:01

so regarding this code

(defn lister [items]
  [:ul
   (for [item items]
     ^{:key item} [:li "Item " item])])

ajs11:08:22

You can avoid the key item meta data by using a parent 'into' on the :ul vector, which will make the items a proper react hierarchy

mrchance21:08:42

This is a very neat trick :thumbsup:

yedi18:08:16

how exactly does the ^{:key item} work

yedi18:08:39

i know it's so that each :li item has a unqiue key for working with react

yedi18:08:45

but i'm confused about that clojure syntax

borkdude18:08:09

^ is short for with-meta I think

noisesmith18:08:45

^{:foo bar} x is the same as (with-meta x {:foo bar})

yedi18:08:57

ah ok interesting

yedi18:08:12

how come :key is part of the metadata instead of the normal props map

pesterhazy19:08:12

it's less magical to just pass it as a prop IMO

pesterhazy19:08:19

better style

juhoteperi19:08:23

In that case :key can be provided in either, but if you use custom component in loop, you need to use metadata: (for [item items] ^{:key (:key item)} [custom item])

ajs11:08:22

Or just do (into [:ul ... (for ... ) without need for metadata

juhoteperi12:08:00

Well, that will work differently. If a item is updated or one item added into the list, React will have to do a lot more work to update the DOM.

juhoteperi12:08:41

When rendering dynamic lists, one should always use keys if it possible.

juhoteperi19:08:27

Or perhaps custom could use props, I don't remember if that works aswell. But I think it is logical to set the key where the list is rendered.

ajs11:08:22

You can avoid the key item meta data by using a parent 'into' on the :ul vector, which will make the items a proper react hierarchy