Fork me on GitHub
#cljsrn
<
2023-01-19
>
Abdel03:01:51

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])
             }
         ])))

dima11:01:08

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) }]))}]

Abdel22:01:05

Thanks dima, that was the fix .