This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2019-07-03
Channels
- # announcements (7)
- # beginners (114)
- # boot (5)
- # calva (25)
- # cider (26)
- # clojure (82)
- # clojure-dev (20)
- # clojure-europe (2)
- # clojure-italy (8)
- # clojure-losangeles (4)
- # clojure-norway (6)
- # clojure-uk (16)
- # clojurescript (21)
- # clojurex (3)
- # core-async (24)
- # cursive (25)
- # datomic (17)
- # emacs (5)
- # events (4)
- # fulcro (9)
- # funcool (1)
- # graalvm (4)
- # hyperfiddle (2)
- # midje (2)
- # mount (2)
- # off-topic (10)
- # pathom (11)
- # pedestal (5)
- # re-frame (36)
- # reagent (15)
- # reitit (3)
- # ring (4)
- # slack-help (2)
- # spacemacs (3)
- # sql (16)
- # tools-deps (5)
I'm trying to re-write a material-ui example with reagent. I am writing cljs code for the following page. https://material-ui.com/getting-started/page-layout-examples/sign-in/ The js code is as follows: https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js Currently, FormControlLabel and LockOutlinedIcon don't work. I have re-wirited the following js code into cljs code.
js
import FormControlLabel from '@material-ui/core/FormControlLabel';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
clojure
(ns my-comp.login
(:require ...
["@material-ui/core" :refer [.. FormControlLabel]]
["@material-ui/icons" :refer [LockOutlinedIcon]]
["@material-ui/core/styles" :refer [makeStyles]]
))
.....
[:> FormControlLabel {:control [:> Checkbox {:value "remember" :color "primary"}] :label "Remember me"}]
.....
[:> Avatar {:class "classes.avator"}
[:> LockOutlinedIcon]
]
.....
The is an error in JS console:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
I knew there are some problems in my cljs code and trying to fix the problem, but I couldn't find the resolution.
I will be happy if anybody give me some help.Hi @tokoma1! When you pass another component as props to a MUI component you need to pass a real react component instead of a reagent component. You can use reagent.core/as-element
, for example.
[:> FormControlLabel {:control (r/as-element [:> Checkbox {:value "remember" :color "primary"}]) :label "Remember me"}]
Remember that :>
turns react component into something that reagent understands but if you hand reagent component to a react-lib it probably doesn't know what to do with it.@valtteri does using :>
means that we can use kebab-case
keywords as arguments to components?
@UCMNZLJ93 :>
is shorthand for reagent.core/adapt-react-class
. I warmly suggest reading through this http://reagent-project.github.io/docs/master/InteropWithReact.html
And about kebab-case
... Reagent automatically converts prop keys from kebab-case
to camelCase
so you can write code that looks like more idiomatic Clojure.
Hi all. : ) Does anybody know of a Clojure library that implements Reagent-like reactions on the JVM? https://reagent-project.github.io/docs/master/ManagingState.html
@U086BARD5 just told me about https://github.com/aaronc/freactive.core .
hi there is an operator I don't understand since it's all special characters I couldn't google it what :<-
does?
https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/subs.cljs
the comments here do a good job explaining it