CODEWITHSUNDEEP
clojureclojurescriptreagent
Mr. Robot
Mr. Robot

Reputation: 1824

What is the correct way to dynamically render components in reagent?

Dynamically rendering components in React is fundamental to its use. It's very easy to do as can be seen here:

  render() {
    return (
      <div className="blocks_loop">
        {this.props.blocks.map(block => (
          <div className="block" />
        ))}
      </div>
    )
  }

In this example you will get as many divs rendered as there are blocks. I am trying to achieve the same thing with reagent, part of which I've documented in this post. There are examples out there of people doing it like this one, but they all seem to include the use of lists which I don't want to use - it just doesn't suit my purpose. I just want as many components out as items I put in.

Update

I now have this code trying to follow the answer below which is meant to render 3 divs for every key value pair in my-map. Nothing is rendered and it throws the error react-dom.development.js:507 Warning: Functions are not valid as a React child.:

(ns mapping-test.views
  (:require
   [re-frame.core :as re-frame]
   [mapping-test.subs :as subs]))

(defn main-panel []

  (def my-map {:a 1 :b 2 :c 3})

  (defn a-component []
    [:h1 "This is a component rendering"])

  (defn my-loop [my-map]
    (for [value my-map]
      [a-component]))

  (fn []
    [my-loop my-map]))

Upvotes: 1

Views: 1492

Answers (1)

Jochen Bedersdorfer
Jochen Bedersdorfer

Reputation: 4122

(defn my-component [blocks]
   [:div.blocks_loop
     (for [b blocks]
       [:div.block])])

Since you are creating hiccup, you can just use any clojure code to map or loop through your data.

Upvotes: 7

Related Questions