Fork me on GitHub
#reagent
<
2019-07-03
>
tokoma02:07:17

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.

valtteri04:07:35

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.

Ahmed Hassan06:07:03

@valtteri does using :> means that we can use kebab-case keywords as arguments to components?

valtteri14:07:07

@UCMNZLJ93 :> is shorthand for reagent.core/adapt-react-class. I warmly suggest reading through this http://reagent-project.github.io/docs/master/InteropWithReact.html

👍 4
valtteri14:07:53

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.

👍 4
Daniel Slutsky08:07:50

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

metehan12:07:41

hi there is an operator I don't understand since it's all special characters I couldn't google it what :<- does?

jthibaudeau13:07:56

the comments here do a good job explaining it

metehan13:07:24

thank you I am checking it

👍 4
stefan15:07:17

like that font

tokoma15:07:00

@valtteri Thank you for your help. Great ! It worked with your code ! I could also understand react components and reagent components.

👍 4