`adapt-react-class` usage leads to `type is invalid` React.createElement error

[kovasap]

Following https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md#creating-reagent-components-from-react-components, I created this code:

(ns app.ui
  (:require
   [reagent.core :as r]
   ["react-data-grid" :as DataGrid]))

(defn maps-to-datagrid
  [maps]
  [(r/adapt-react-class DataGrid)
   {:columns (clj->js (map #({:key % :name (name %)}) (keys (first maps))))
    :rows (clj->js maps)}])

(prn DataGrid)
(maps-to-datagrid [{:test "v1" :test2 "v2"}])
; => [:> #object[t$jscomp$1] {:columns #js [#js {:key "test", :name "test"} #js {:key "test2", :name "test2"}], :rows #js [#js {:test "v1", :test2 "v2"}]}]

This all looks normal and expected, but when I try to use this in my browser app as a component, I get this error:

Does the documentation need to be updated with special rules about importing react components?

[kovasap]

https://github.com/kovasap/react-data-grid-failure-repro is a minimal reproducing case.

[Deraen]

React Data Grid 6 and below are no longer supported and we recommend upgrading to v7 beta. Check readme and examples for more info.

The example code in the README is for v7, and v6 works differently.

This very simple example works with v6:

(defn datagrid []
  (r/create-element
    DataGrid
    #js {:columns #js [#js {:key "id" :name "ID"}
                       #js {:key "title" :name "Title"}]
         :rowsCount 2
         :rowGetter (fn [i]
                      #js {:id 0 :title "Foo"})
         }))

Shadow-cljs seems to have some problems consuming v7 on default settings. I didn't look into this more. (Aha you already opened issue on Shadow-cljs about this.)

It looks like there is nothing to change in Reagent or the docs.

If you need lazy loading/rendering lists/tables, check https://github.com/bvaughn/react-virtualized for an alternative. It is quite a lower level than DataGrid though.

[kovasap]

Thanks this works perfectly! I would still like to get v7 working, so I'll keep following up on the shadow-cljs side.