Render List from API response

demo.cljs

(ns demo.core
  "Basic Example."
  (:require [reagent.core :as r :refer [atom]]
            [ajax.core :refer [GET]]
            ["picasso-pkg" :refer [Card List List.Item message.error]]))

; - This is global and be accessed from inside/outside this Namespace
(def app-state (atom {:posts []}))

; - Error Handler
(defn get-error-handler
  [error]
  (println "error -> " error)
  (message.error (str (:status error) ": Something went wrong...")))

; - Success Handler
(defn get-handler
  [response]
  (println "response -> " response)
  (swap! app-state assoc :posts response))

; - GET Request
(GET
  "https://jsonplaceholder.typicode.com/posts"
  {:handler get-handler
   :error-handler get-error-handler
   :response-format :json
   :keywords? true})

(defn list-of-posts
  "Renders a List of Posts from an API"
  []
  [:> Card {:title "List of Posts"}
   [:> List
    (for [post (take 10 (:posts @app-state))]
      [:> List.Item {:key (:id post)}
        (:title post)])]])

(r/render
  [:div.padding-lg
   [list-of-posts]]
  (.getElementById js/document "app"))