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) }]))}]
Thanks dima, that was the fix .