Search code examples
material-uiclojurescriptreagent

clojurescript + reagent + reagent-material-ui: Trying to loop through list

So I've been using clojurescript and reagent only for a couple of days and I'm trying to create a simple personal website. I set the project up with shadow-clj for hot reloading.

First I imported the required material-ui stuff:

(:require [reagent-material-ui.icons.home :refer [home]]
          [reagent-material-ui.icons.apps :refer [apps]]
          [reagent-material-ui.core.list :refer [list]]
          [reagent-material-ui.core.list-item :refer [list-item]]
          [reagent-material-ui.core.list-item-icon :refer [list-item-icon]]
          [reagent-material-ui.core-list-item-text :refer [list-item-text]])

Then I defined the items I want in my navbar:

(def menu-items '({:list-icon [home] :list-text "Home"}
                  {:list-icon [apps] :list-text "Portfolio"}))

And then I tried to loop through the menu-items and put them in reagent components:

(defn navbar []
  [list
    (map (fn [item]
           [list-item
             [list-item-icon (:list-icon item)]
             [list-item-text (:list-text item)]])
         menu-items)])

Now when I reload the code only the text from :list-text is shown but no icons. I've already tried to show the icons without any loop and that worked perfectly.

There is no error output in the console only two warnings:

Warning: Every element in a seq should have a unique :key: ([#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [home]] [#object[reagent.impl.template.NativeWrapper] "Home"]] [#object[reagent.impl.template.NativeWrapper] [#object[reagent.impl.template.NativeWrapper] [apps]] [#object[reagent.impl.template.NativeWrapper] "Portfolio"]] 
 (in webapp.core.page >  > webapp.components.index.home >  > webapp.components.navbar.navbar)

and

Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: webapp.components.index.home, webapp.components.navbar.navbar, webapp.core.page
Solution

  • The clue is that the icon is a Reagent component. Defining menu-items as a quoted list gives Reagent 'home instead of home. You might solve that problem by defining menu-items as a vector, without quoting.