This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-12-09
Channels
- # adventofcode (132)
- # announcements (19)
- # babashka (7)
- # babashka-sci-dev (6)
- # beginners (46)
- # calva (25)
- # chlorine-clover (5)
- # cider (2)
- # clara (17)
- # clj-kondo (93)
- # clojure (2)
- # clojure-dev (4)
- # clojure-europe (12)
- # clojure-losangeles (3)
- # clojure-nl (7)
- # clojure-uk (4)
- # clojurescript (29)
- # conjure (6)
- # core-async (8)
- # cursive (16)
- # data-science (7)
- # datomic (1)
- # exercism (4)
- # figwheel-main (8)
- # fulcro (9)
- # graphql (2)
- # helix (1)
- # introduce-yourself (3)
- # jobs (3)
- # lsp (4)
- # malli (20)
- # minecraft (3)
- # nextjournal (62)
- # off-topic (16)
- # overtone (34)
- # pathom (5)
- # polylith (10)
- # portal (1)
- # re-frame (104)
- # reagent (29)
- # reitit (1)
- # remote-jobs (2)
- # rum (3)
- # shadow-cljs (22)
- # spacemacs (2)
- # sql (10)
- # tools-deps (17)
- # vim (13)
Hi, I'm getting the "every element in a seq should have a unique key" warning, but I dont understand why:
[:tbody
(->> @sorted-docs
(mapcat
(fn [doc]
(into [[docs-table-row doc]]
(map #(vector search-result-row %)
(::ss/full-text-search-results doc)))))
(map-indexed (fn [idx el] ^{:key idx} el)))]
^{:key idx}
metadata is added to the el
SYMBOL here, not the vector defining the element here.
You could use (with-meta el {:key idx})
here.
Or [^{:key idx} [docs-table-row doc]]
would attach the metadata to the vector which works, but then you'd need the idx inside the mapcat.
And OK, the mapcat fn anyways adds more elements from the map
part.
You could consider using fragments here, to avoid mapcat:
[:tbody
(for [doc @sorted-docs]
[:<>
{:key (:id doc)} ;; if doc has some kind of ID
[docs-table-row doc]
(for [result (::ss/full-text-search-results doc)]
^{:key ...} [search-result-row result])])]
The resulting DOM tree is the same, but you avoid the need to flatten the datastructures when rendering the elements.
thanks a lot! It all makes sense now đ
doesnt the (map-indexed) part add the key to the vectors correctly?
(search-result-row and docs-table-row are both functions returning a [tr with stuff in it
ok, making it
(into [:tbody] (->> ...
seems to solve it. Just dont understand why...^{:key idx}
metadata is added to the el
SYMBOL here, not the vector defining the element here.
You could use (with-meta el {:key idx})
here.
Or [^{:key idx} [docs-table-row doc]]
would attach the metadata to the vector which works, but then you'd need the idx inside the mapcat.
You could consider using fragments here, to avoid mapcat:
[:tbody
(for [doc @sorted-docs]
[:<>
{:key (:id doc)} ;; if doc has some kind of ID
[docs-table-row doc]
(for [result (::ss/full-text-search-results doc)]
^{:key ...} [search-result-row result])])]
hi, Iâm trying to âtranslateâ this code to clojure (https://uppy.io/docs/react/initializing/#Functional-Components), the useUppy is a react hook, and I donât know how to use it
import Uppy from '@uppy/core'
import React from 'react'
import { DashboardModal, useUppy } from '@uppy/react'
function MyComponent () {
const uppy = useUppy(() => {
return new Uppy()
.use({ autoProceed: true' })
})
return <DashboardModal uppy={uppy} />
}
This is my try
(ns online-app.download
(:require ["@uppy/core" :as Uppy]
["@uppy/react" :refer [FileInput useUppy]]))
(defn page
[]
(let [uppy-instance (useUppy (.use (Uppy.) {:autoProceed true
:restrictions {:minNumberOfFiles nil
:maxNumberOfFiles 1
:maxFileSize "10mb"
:allowedFileTypes "pdf"}}))]
[:div "updaload"
[:f> FileInput {:uppy uppy-instance
:pretty true
:inputName "files[]"}]]))
But when I load the page Iâm getting
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)........
any tips? thankssee the docs https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks
at the beginning I thought I was following the same pattern from the code in that page but I was wrong, I modified the exact example to my needs and the hook is no longer an error
(defn example []
(let [[count set-count] (react/useState 0)]
[:div
[:p "You clicked " count " times"]
[:button
{:on-click #(set-count inc)}
"Click"]])))
(defn root []
[:div
[:f> example]])
(defn example []
(let [uppy-ins (useUppy #(.use (Uppy.) {:autoProceed true
:restrictions {:minNumberOfFiles nil
:maxNumberOfFiles 1
:maxFileSize "10mb"
:allowedFileTypes "pdf"}}))]
[:> FileInput {:uppy uppy-ins
:pretty true
:inputName "files[]"}]))
@U4YGF4NGM thanks, now my problem is something related with uppy no receiving the thing it needs
Uppy.js:1047 Uncaught TypeError: Expected a plugin class, but got object. Please verify that the plugin was imported and spelled correctly.
at Uppy.use
@kah0ona I will spend some time trying to work with the react version of uppy now that Iâm moving on, if I donât have luck I will give the js version a try
fwiw, I use uppy in production, as follows: https://gist.github.com/Kah0ona/603e17e19576543c591bb93f1f3dfd0b
I compile those external modules using webpack, package.json:
{
ânameâ: ââŚ.â,
âversionâ: â0.0.1",
âscriptsâ: {
âwatchâ: âwebpack -d --watchâ,
âbuildâ: âwebpack -p --devtool source-mapâ
},
âdependenciesâ: {
â@cljs-oss/module-depsâ: â^1.1.1",
âuppyâ: â^1.29.1"
},
âdevDependenciesâ: {
âwebpack-cliâ: â^2.1.5â
}
}
although tbh, I still am kind of intimidated by those esoteric (from my pov) JS tools đ
@kah0ona you are using the javacript library instead of the react components, right?
so not really sure why I did what I did (and I am by no means an expert when it comes to that topic :-))
thanks, I really appreciate your help, there some parts in your gist, that I didnât know how to use it
I think the most idiomatic way nowadays would be the react components though? But since the JS interop is quite small in my case, only a few lines, it works fine for my case
Hi, I've a function that has a hook and should render some children
(defn content-wrapper [& children]
(let [theme (obj->clj (useTheme))]
[:div {:class (<class content-st theme)}
children]))
(defn content [& children]
[:f> content-wrapper children])
How can I avoid the Every element in a seq should have a unique :key
?
Is use it like this
(defn app []
[content
[:div ...]
[:div ...]
])