Hi, I’m trying to use a React library whose JS components require a ‘children function’. I’m having difficulty figuring out how to express this in Reagent/CLJS. Here’s an example of the JS code

<Droppable droppableId="droppable-1" type="PERSON">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey' }}
    >
      <h2>I am a droppable!</h2>
      {provided.placeholder}
    </div>
  )}
</Droppable>;

[:> Droppable {:droppableId    "fieldlist"
                   :isDropDisabled true}
     (fn [provided snapshot]
       [:div
        [field-menu-item {:name "Long Text Field"}]
        [field-menu-item {:name "Select Field"}]
        [field-menu-item {:name "Date Field"}]])]

@eoliphant as-element https://github.com/reagent-project/reagent/blob/master/src/reagent/core.cljs#L44

ah heck, ok will give that one a shot thanks @juhoteperi

I was reminiscing on my start in programming a couple years ago and I just wanted to say thank you to a few people who helped me in a big way... I don't know where else to do it, so posting here. In particular, I'd like to thank @borkdude for recommending i to turn a starter project in to a lein template via twitter (he was my first follower 😂). @yogthos for everything he does to enrich the clojure community (truly a hero) and in particular for talking with me early on and giving me guidance with things like the cookbook. @mikethompson and @danielcompton for entrusting me with the re-frame template and always encouraging me

anyone played much with HOC’s and Reagent (specifically ReactDND)? I’m messing around with it, have things sort of working, but it just seems incredibly inelegant lol. Found this code (https://github.com/johnswanson/reagent-dnd/blob/c2b3b0e42c8e534f6d33f19fd763ec9e5bfaa6e6/src/cljs/reagent_dnd/drag_source.cljs) which ‘works’ but is more complex than the equivalent JS and there’s still seem to be some issues with some of the functionality. Using that and this code (https://react-dnd.github.io/react-dnd/docs-drag-source.html) it’s again, sort of working, but not doing all that I’d like here’s the JS setup

...
var Card = createReactClass({
  render: function () {
    // Your component receives its own props as usual
    var id = this.props.id;

    // These props are injected by React DnD,
    // as defined by your `collect` function above:
    var isDragging = this.props.isDragging;
    var connectDragSource = this.props.connectDragSource;

    return connectDragSource(
      <div>
        I am a draggable card number {id}
        {isDragging && ' (and I am being dragged now)'}
      </div>
    );
  }
});

module.exports = DragSource(Types.CARD, cardSource, collect)(Card);
...

(defn draggable
  [child state]
  (let [dragSourceFn (DragSource
                       "TEST"
                       #js {:beginDrag (fn [props monitor component]
                                         (print "Props: " props)
                                         
                                         (print "Monitor: " monitor)
                                         (print "Component: " component)
                                          #js {:id 1})}
                       (fn [connect monitor]
                         #js {:connectDragSource (.dragSource connect)
                              :isDragging        (.isDragging monitor)}))]
    [(r/adapt-react-class
       (dragSourceFn
         (r/reactify-component
           (r/create-class {;:component-did-mount   (fn [this])
                            ;:component-will-update 1
                            :reagent-render (fn [this]
                                              (let [connect-drag-source (-> (r/current-component)
                                                                            (r/props)
                                                                            (:connectDragSource))]
                                                ;(print connect-drag-source)
                                                (connect-drag-source (r/as-element
                                                                       [:div {:test-prop 1} child]))))}))))]))

There are various issues. Say the beginDrag callback isn’t getting child’s props. no idea what’s going on there. and I don’t know if there’s a simpler way to get a handle on connect-drag-source. I know part of the issue is the need to go back and forth so much between native react and reagent, but that’s what I’m trying to abstract away. also getting some weird behavior when follow the proper convention of passing [child state] into the render function