Fork me on GitHub

I'm trying to re-write a material-ui example with reagent. I am writing cljs code for the following page. The js code is as follows: Currently, FormControlLabel and LockOutlinedIcon don't work. I have re-wirited the following js code into cljs code.

import FormControlLabel from '@material-ui/core/FormControlLabel';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';

            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"

        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
(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.

Ahmed Hassan06:07:03

@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

👍 4

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?


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


the comments here do a good job explaining it


thank you I am checking it

👍 4

like that font


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

👍 4