Provide example of creating new element / class

[Farid Zakaria]

Hi!

Enjoying the library but i'm trying to figure out how to create a new class.
I'm getting the error at the moment
Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

Here is the code I'm trying to perform

(def TextArea
  (d/textarea #js {}))

(defn editor
  []
  (let [textarea base-text-area]
    (.createClass React #js
        {:render (fn [] (TextArea) )
         :componentDidMount #(print %)  })))

[Keith Irwin]

Try using defn rather than def for the TextArea thing. You're calling it like a function down below. Or maybe change (TextArea) to TextArea?

[Farid Zakaria]

@zentrope thanks that was a little help overall its hard.
Sorry for bugging.

Here's a basic stripped down

(def TextArea
  (d/textarea #js {}))

(def Editor
  (.createClass React #js
        {:render #(TextArea)}))


(q/defcomponent CodeView
                "The view for the JSON documen1t"
                []
               Editor )

I would expect this to work. If i replace Editor in the CodeView component then it works. So something is wonky in how I'm expecting to create my React component natively. However I believe I'm providing everything one would need (just a function for the render that would return a component)

[Farid Zakaria]

Bah! I was forgetting constructor.
If its worth any help for anyone who finds this issue here is the final sample code

This specific sample shows how you can leverage CodeMirror as a native React component

;; This was taken from yogotho's blog
;; http://yogthos.net/posts/2015-11-12-ClojureScript-Eval.html
(defn editor-did-mount [node]
    (let [cm (.fromTextArea  js/CodeMirror
                             node
                             #js {:mode #js {:name "javascript" :json true}
                                  :lineNumbers true})]
      (.on cm "change" #(print (.getValue %)))))

(def TextArea
  (d/textarea #js { :ref (fn [input] (editor-did-mount (.getDOMNode input))) }))

(def Editor
  (d/constructor
  (.createClass React #js
        {:render (fn [] TextArea) })))

(q/defcomponent CodeView
                "The view for the JSON document"
                []
                (Editor {}) )