Clojurians Log v2

@tokoma1 has joined the channel

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]
]
.....

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.

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"}]

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

@daslu has joined the channel

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

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

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