CODEWITHSUNDEEP
clojurereagent
Pablo Fernandez
Pablo Fernandez

Reputation: 287590

Can reagent components have more than one top level HTML entities?

I seen plenty of code like this:

(defn simple-component []
  [:div
   [:p "I am a component!"]
   [:p "This component has two paragraphs"]])

Is there a way to make that component have just two p elements, without the enclosing div?

Upvotes: 3

Views: 166

Answers (2)

Chris
Chris

Reputation: 711

You can do that with a react fragment which can created in two ways:

  1. With a js array (which takes react elements):

    (defn simple-component []
      #js [(r/as-element [:p "I am a component!"])
           (r/as-element [:p "This component has two paragraphs"])])

  2. With the [:<> ... ] tag (which takes hiccup forms):

    (defn simple-component []
      [:<>
          [:p "I am a component!"]
          [:p "This component has two paragraphs"]])

Implemented in this PR

Upvotes: 1

ayato_p
ayato_p

Reputation: 433

it seems "rookie mistake". please check this wiki page: Form-1: A Simple Function https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

Upvotes: 1

Related Questions