This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-01-26
Channels
- # arachne (80)
- # beginners (76)
- # boot (16)
- # cider (66)
- # cljs-dev (62)
- # cljsjs (1)
- # clojure (106)
- # clojure-dev (5)
- # clojure-greece (2)
- # clojure-italy (9)
- # clojure-russia (1)
- # clojure-spec (61)
- # clojure-uk (130)
- # clojurescript (21)
- # core-async (9)
- # cursive (3)
- # datomic (37)
- # events (41)
- # figwheel (31)
- # fulcro (27)
- # hoplon (1)
- # jobs (2)
- # lumo (11)
- # off-topic (155)
- # re-frame (71)
- # reagent (27)
- # ring-swagger (3)
- # shadow-cljs (132)
- # spacemacs (5)
- # specter (1)
- # sql (37)
- # test-check (10)
- # uncomplicate (5)
- # unrepl (2)
- # yada (3)
@eveko Make sure you are putting the on-change on the select and not on the options ... this should work
(defn myselect []
(let [ratom (reagent/atom nil)]
(fn []
[:div
[:select {:value (or @ratom "")
:on-change #(reset! ratom (-> % .-target .-value))
}
[:option {:value "foo"} "Foo"]
[:option {:value "bar"} "Bar"]
[:option {:value "baz"} "Baz"]
]
[:h1 "You selected: " @ratom]
])))
It is on the select, however I am using an adapter for the dropdown component of semantic ui
@eveko You can use soda-ash (reagent + semantic ui react) to do that too
(defn my-semantic-select []
(let [ratom (reagent/atom nil)]
(fn []
[:div
[sa/Dropdown
{:placeholder "Select something..."
:value (or @ratom "")
:selection true
:options [{:value "foo"
:text "Foo"}
{:value "bar"
:text "Bar"}
{:value "baz"
:text "Baz"}
]
:on-change (fn [_ data]
(let [value (get (js->clj data :keywordize-keys true)
:value
"")]
(reset! ratom value)))
}
]
[:h1 "You selected: " @ratom]
])))
@eveko You can use soda-ash (reagent + semantic ui react) to do that too
(defn my-semantic-select []
(let [ratom (reagent/atom nil)]
(fn []
[:div
[sa/Dropdown
{:placeholder "Select something..."
:value (or @ratom "")
:selection true
:options [{:value "foo"
:text "Foo"}
{:value "bar"
:text "Bar"}
{:value "baz"
:text "Baz"}
]
:on-change (fn [_ data]
(let [value (get (js->clj data :keywordize-keys true)
:value
"")]
(reset! ratom value)))
}
]
[:h1 "You selected: " @ratom]
])))
Try starting from a clean project, I am pretty certain that error is happening from a different part of your codebase
Well the error show [nil {}
and the map is exactly the same as the semantic select here above
1. lein new reagent-figwheel semantic-select
2. add [soda-ash "0.76.0"]
to deps vector in project.clj file
3. add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
to the <head> tag inside resources/public/index.html
4. open core.cljs and add [soda-ash.core :as sa]
in the :require block of the ns
5. also in core.cljs, replace the page
function with the following
(defn my-semantic-select []
(let [ratom (reagent/atom nil)]
(fn []
[:div
[sa/Dropdown
{:placeholder "Select something..."
:value (or @ratom "")
:selection true
:options [{:value "foo"
:text "Foo"}
{:value "bar"
:text "Bar"}
{:value "baz"
:text "Baz"}
]
:on-change (fn [_ data]
(let [value (get (js->clj data :keywordize-keys true)
:value
"")]
(reset! ratom value)))
}
]
[:h1 "You selected: " @ratom]
])))
(defn page [ratom]
[:div
[my-semantic-select]
])
6. from a terminal, run lein figwheel dev
7. open a browser and go to localhost:3449My guess is somewhere there is a nil when you don't expect it, and you're trying to use that nil as a reagent component .. i am not sure, but i think shadow-cljs wouldn't cause an issue if you were able to use it making other 'reagenty' things