For future reference - #C0620C0C8 would be a better channel for this. There's also #C073DKH9P but it uses Reagent for rendering and that's exactly what you're having problems with. But what exactly have you tried so far? What is the code that attempts to render that component?

I'm calling the react-datepicker lib in views.cljs as follows (this part is not on GitHub cause it don't work): ["react-datepicker" :as react-datepicker :refer [DatePicker]] I then try to create a function for it like this:

(defn datepicker-inner []
  (let [date (js/Date.)]
    (reagent/create-class
     {:display-name "date picker"

      :component-did-mount
      (fn [comp]
        (println "date picker did mount"))

      :reagent-render
      (fn []
        [:div
         [DatePicker
          {:selected date
           :onChange (fn [] (println "changed!"))}]])
      })))

My bad, I wasn't aware of #C0620C0C8

I'm just trying to make the date picker show up at all. I figure once that is done, I can figure out the rest from there.

Two things to do: 1. Log the value of DatePicker and confirm that it looks like a React component to exclude any possibility of an improper import 2. Instead of [DatePicker ...] use [:> DatePicker ...] - it's required to let React components work with Reagent hiccup.

I should also say that I have zero JS knowledge...

Thanks p-himik! I've tried 2 already, and it didn't work at all.

By "log the value" I mean use (js/console.log ...) since it will show the object's internals in the JS console of your browser. Regular printing won't do here.

If (2) didn't work then most likely the import is improper and you'll see it in (1).

I'm seeing this error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Hmmm. How should I fix the import? I'm at a bit of a loss here, sorry. Does the lib need to be in shadow-cljs.edn?

I pulled it in with npm install

Log the value of react-datepicker and send a screenshot of the result with the top level expanded.

You installed it correctly, it's just that :require that's wrong.

(Most likely)

Apologies for the stupid question, but what exactly do you mean by logging the value of react-datepicker?

How and where should I log it?

Right after the (ns ...) form, add (js/console.log 'xxx react-datepicker). Then open the browser's DevTools, navigate to Console, and load the web page in the main window. In the console, you should see a record that starts with xxx and is followed by some value. That value should be an expandable object - expand the top level, make a screenshot, and attach it here.

Cheers! On it

Here it is:

I think CalendarContainer is from that library, and it's showing up in the logs.

First of all, that xxx is displayed as an object in your console and not as a CLJS symbol. That means that you should install https://github.com/binaryage/cljs-devtools/ - it will make all CLJS value that are logged to the console be properly displayed. The second object has a default key - most likely it's a so-called default export from the react-datepicker library. And I'm gonna go out on a limb and guess that that's DatePicker itself. So what you wanna do then is require the library as ["react-datepicker$default" :as DatePicker]. This section of the docs describes all the important bits of how one might require NPM packages: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

Thank you! I'll try that now.

It appeared!

Great!

Thank you so much for your time and insight, @U2FRKM4TW!

I've been banging my head against the wall for days on this...

While I have you here, one more quick question

> banging my head against the wall for days Heh, yeah, don't do that unless you always have some lead to pursue. When you're fully stuck for more than 20-30 minutes, just ask someone.

The library assumes that the users will import the css directly in their JS source: https://github.com/Hacker0x01/react-datepicker/ We can't do that in CLJS can we? From what I understand, the only way is to import it in index.html

> When you're fully stuck for more than 20-30 minutes, just ask someone. Yeah I should be more open to asking for help. Self-reliance is great, but sometimes it bites you in the ass. This was one of those times XD My complete ignorance of JS, React, and Reagent isn't helping.

> We can't do that in CLJS can we? We can't indeed. Including it directly in HTML is one option, but you'll have to make that file available to your web server. I'd probably just copy it into your resources folder with a build hook and then add it to .gitignore. I myself use SASS, so I simply require all such files in my main .scss and then it gets built and loaded in the main HTML.

Or rather, we can, but that would require using webpack and organizing your whole app around that.

This is a frontend-only app. I'm not using a server, just hosting it on GH pages 🙂

Just a simple tool for the wife to use at work

Well, there is a server still - it's just on GitHub's premises. And the statement still stands true - you gotta make that CSS file available to the server somehow, which is probably just putting it into the right dir.

Yeah, I'll try to figure that out next. Thanks again @U2FRKM4TW!

BTW if it's just a small app then you might find https://github.com/day8/re-com/ sufficient. Then you won't have to deal with NPM packages, at least not directly. And the library does have a date picker component.

Ah, yes, I've seen that while searching for libs. Sadly, it doesn't seem to do date ranges, which is what I need 😕

A date range is just two dates. ;)

Very true 🙂

I'll try to figure out the CSS for this at least, if only as an exercise in using JS from CLJS.