Ask a question: In a js project:

<Map zoom={3} center={this.mapCenter}>
            <Polygon path={this.state.polygonPath}>
              <PolyEditor
                active={this.state.polygonActive}
              />
            </Polygon>
          </Map>

(def ui-amap (component-factory Map))
(def ui-amap-polygon (component-factory Polygon))
(def ui-amap-polyeditor (component-factory PolyEditor))
(ui-amap {:zoom 12.5 :center map-center}
                               (ui-amap-polygon {:path polygon-path}
                                                (ui-amap-polyeditor {:active true})))

react.development.js:126 Uncaught Error: React.Children.only expected to receive a single React element child.
    at invariant (react.development.js:126)
    at Object.only (react.development.js:1263)
    at Polygon.value (index.js:178)
    at Polygon.value (index.js:190)
    at finishClassComponent (react-dom.development.js:14302)
    at updateClassComponent (react-dom.development.js:14265)
    at beginWork (react-dom.development.js:15083)
    at performUnitOfWork (react-dom.development.js:17821)
    at workLoop (react-dom.development.js:17861)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)

I figured http://out.It is my factory function. I should use js/React.createElement instead of dom/create-element.

(defn component-factory [component]
  (fn [props & children]
    (apply dom/create-element component (clj->js props) children)))

(defn component-factory [component]
  (fn [props & children]
    (apply js/React.createElement component (clj->js props) children)))

has anyone used getDerivedStateFromError with fulcro?

I tried doing this

(defprotocol IErrorHandling
  (getDerivedStateFromError [error]))

(defsc Foo [this props]
  {:protocols (Object
                static IErrorHandling
                (getDerivedStateFromError [error]
                  {:has-error true}))}
  "test")

but i’m getting a complier exception

@currentoor defsc already supports it, from the docs: :getDerivedStateFromProps (fn [props state] ...)

;; ADDED for React 16:
      :componentDidCatch         (fn [error info] ...)
      :getSnapshotBeforeUpdate   (fn [prevProps prevState] ...)
      :getDerivedStateFromProps  (fn [props state] ...)

lol i couldn’t find it in the book, thanks!

it did seem like something that should be built in 😅

remember to check the source docs, they usually have good things 😉

and are the most updated usually

i tried to search the repo on github but maybe that was just github search being sucky

@wilkerlucio that’s getDerivedStateFromProps not getDerivedStateFromError

are they the same?

not sure

but if you need some extra that's not in the list you should use the Object protocol to add

I tried that but it wasn’t working

(defsc Foo [this props]
  {:protocols (Object
                (getDerivedStateFromError [this error]
                  {:has-error true}))}
  "test")

I think

oh Object is the protocol

that puts it on the instance

whereas i need it to be static

i’ll try prepending static

@wilkerlucio i tried this

(defsc Foo [this props]
  {:protocols (static Object
                (getDerivedStateFromError [this error]
                  {:has-error true}))}
  "test")

but react is still giving me this warning Warning: ucv.ui.order-flow.refunds.ui/OrderRefund: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.

not sure how to add that, but if it's a method on the class you can try to hack with: (gobj/set Foo "getDerivedStateFromError" (fn [error] ...))

such hack wow lol

no luck 🙁

and seeing how @tony.kay did it in fulcro, seems like it won’t be that straightforward

#?(:clj
   (defn- make-static-lifecycle [options]
     (when (contains? options :getDerivedStateFromProps)
       (let [lambda (get options :getDerivedStateFromProps)]
         ['static 'field 'getDerivedStateFromProps `(fn [p# s#]
                                                      (let [fp#        (goog.object/get p# "fulcro$value")
                                                            fs#        (goog.object/get s# "fulcro$state")
                                                            new-state# (merge fs# (~lambda fp# fs#))]
                                                        (cljs.core/js-obj "fulcro$state" new-state#)))]))))