This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-19
Channels
- # announcements (19)
- # asami (9)
- # babashka (26)
- # beginners (87)
- # biff (23)
- # calva (6)
- # clerk (7)
- # clj-kondo (3)
- # cljsrn (3)
- # clojure (115)
- # clojure-belgium (1)
- # clojure-berlin (1)
- # clojure-europe (31)
- # clojure-gamedev (5)
- # clojure-nl (2)
- # clojure-norway (8)
- # clojure-uk (2)
- # clojurescript (43)
- # clr (23)
- # datalevin (1)
- # datomic (14)
- # dev-tooling (23)
- # fulcro (38)
- # graphql (1)
- # gratitude (1)
- # jobs (1)
- # lsp (30)
- # off-topic (7)
- # pathom (25)
- # portal (21)
- # quil (6)
- # releases (5)
- # remote-jobs (1)
- # shadow-cljs (34)
- # sql (5)
- # tools-deps (6)
- # xtdb (13)
Hi guys, I am trying cljs for the first time in a side project and I am facing this issue in a react native app . I have a list of todo items in a flatList .. so let's say i have 3 items, if I delete item-2 , when the list/view re-renders the item-3 gets the title of item-2 console logging this , I found that item-3 gets the title from the same ratom that was used for item-2 I would appreciate any help : )
[:> FlatList {:data ids
:renderItem (fn [data-item]
(r/as-element ^{:key (.-index data-item)}
[task-view {:id (.-item data-item) }]))}]
(defn task-view
[{:keys [id]}]
(let [task @(rf/subscribe [:task id])]
[task-item task]))
(defn task-item
[task]
(let [!title (r/atom (:title task))] ;; local state
(fn [task]
[:> comp/TaskItem ;; this is a pure component in js
{:default-value @!title
:on-change-text #(reset! !title %)
:on-blur #(dispatch [:task/save-title %1 %2])
}
])))
Hi. You probably should provide key-extractor
property for FlatList https://reactnative.dev/docs/flatlist#keyextractor
[:> FlatList {:data ids
:key-extractor #(.-index %)
:renderItem (fn [data-item]
[task-view {:id (.-item data-item) }]))}]