Fork me on GitHub

hello everyone - i have a stumbling block here with reagent/cljs-react-material-ui. maybe one of you can help:

(ns ui-sandbox.nav
  (:require [cljsjs.material-ui]                            ; this also loads react (is within)
            [cljs-react-material-ui.core :as mui]
            [cljs-react-material-ui.reagent :as rui]        ; that's the react-material-ui wrapper, not reagent itself!
            [cljs-react-material-ui.icons :as icons]
            [reagent.core :as reagent]))

; just an example how to use a full react class instead of the shorter form (because we will need that later!)
(defn user-menu []
    {:component-did-mount #(println "user-menu-did-mount")
     :display-name        "user-menu"
     :reagent-render      (fn []
                            [rui/icon-menu {:icon-button-element (mui/icon-button {:touch true} (icons/navigation-expand-more))}
                             [rui/menu-item {:primary-text "Edit Profile"}]
                             [rui/menu-item {:primary-text "Logout"}]])}))

(defn user-bar []
   [rui/list-item {:primary-text "Michael Heuberger" :right-icon-button [user-menu]}]])



in the browser's dev console i get the error "` Warning: Failed propType: Invalid prop rightIconButton supplied to ListItem, expected a single ReactElement. Check the render method of smx3_ui_sandbox.nav.user_bar."


@michael.heuberger: try to wrap the right-icon-button value with r/as-element. The docstring says "Turns a vector of Hiccup syntax into a React element"


:right-icon-button (r/as-element [user-menu])


anyone coming from react/redux?


I did some react / redux stuff


@michael.heuberger: how does it compare in real life?


@lewix: I guess that the question was for me simple_smile . I like reagent much more, because I feel that abstracting components as functions was a really great decision. Also the reagent atom provides a lot of stuff you need to wire up manually in the react apps.


@mihaelkonjevic: ah sorry. hehe thanks for catching that - do you feel as productive? I like redux middlewares a lot, there won't be a penury of the libraries around it anytime soon - do we have something similar in the reagent ecosystem?


I feel very productive, but I might be a wrong person to ask because I’m also lead dev on Keechma which is a micro framework for Reagent ( I would also recommend you to check re-frame to see how people architect their Reagent apps


I have done some react/redux and @mihaelkonjevic said what I think: reagent make it easy to do things you have to manually wire up on react


that and having the things clojurescript comes with: immutable data structures, core api, macros and clojure.async


I must confess to being really spoilt by Reagent+re-frame myself, and find it hard to go back to anything else. 😛


That suite should be called Recrack. Then I can say “once you go Recrack you can’t go back”. 😛


cky: What were you using before?


@lewix: Y'know, plain React.


has anyone here tried elm?


@bojan.matic: only superficially .. and it was great


human-readable error messages. in particular, compile time errors w.r.t. schema was great. Seems like a big step up from what clojurescript can do in that space (prismatic schema is good, but still runtime :( )


more a react-question than a reagent-one. Why do a component (all components) re-render when I resize the window, but not if I programatically resize its parent component?


or rather: why does it re-render when resizing the window?


@nberger: thanks but reagent/as-element doesnt work well for me. the life cycle seems broken, i.E. :component-did-mount #(println "user-menu-did-mount") is never printed when you wrap it with as-element


@michael.heuberger: I'm far from the keyboard now, and haven't used as-element much myself, but I'd think the lifecycle should work. It'd be great if you could post a failing example, without material UI to make it simpler. Maybe you can use to do that, it requires reagent.core


@michael.heuberger: What are you attempting to do? My suggestion might be off but if you ran into my sort of problem then create-class worked well.