Refactor Root Component for Multiple Sessions

There are now multiple sessions in the data model, so lets refactor that holds multiple sessions

Update root-component to display details from multiple session

Add React DOM elements using dom/div, dom/h2 and dom/p.

See the React DOM Elements documentation for more details.

Assume the data you need is contained within the app-state which is passed as the argument app to the root-component.

Reveal answer...

After the h1 for conference name, add a div element. Inside this div the for function is used to iterate over the vector of sessions. Each session creates a h1 for :title and p for :description and :twitter-handle

(defn root-component [app owner]
    (render [_]
      (dom/div nil
        (dom/h1 nil (:conference-name app))
        (for [session (:sessions app)]
          (dom/div nil
            (dom/h1 nil (:title session))
            (dom/h3 nil (str "By " (:speaker-name session)))
            (dom/p nil (:description session))
            (dom/hr nil)
            (dom/p nil (str "About " (:speaker-name session) ":"))
            (dom/p nil (:speaker-biography session))
            (dom/p nil (:twitter-handle session))
            (dom/p nil (:github-handle session))
            (dom/p nil (:speakers-website session))))))))


Clojure can iterate over a collection using functions such as for

Remember that React likes div tags around things too (as React does not render lists like list of DOM children)

Resulting web page

The web page with multiple sessions should look something like this:

ClojureX Project - Multiple Sessions - no styles

results matching ""

    No results matching ""