A minimalistic ClojureScript interface to React.js
Fredrik Andersson 2021-02-17T09:25:58.067400Z

Hi, I'm trying to use a input select option. But I don't understand how to fill it with the value from database.

p-himik 2021-02-17T09:29:51.067500Z

This is an incredibly all-encompassing question that involves every single part of a web app. If you don't need to refresh those values as soon as they change in the DB, then you can just serve the serialized data in your index.html in some <script> tag with a custom type and deserialize the data on the client side.

Fredrik Andersson 2021-02-17T09:37:33.067700Z

ok, i want it to be updated when the data changes on the server

Fredrik Andersson 2021-02-17T09:37:39.067900Z

i have a subscription to a firestore backend

Fredrik Andersson 2021-02-17T09:38:14.068100Z

my first problem is that i just cant make it show the value from the database

p-himik 2021-02-17T09:40:41.068300Z

> i have a subscription to a firestore backend OK, at least you're further in than I thought you were. :) > my first problem is that i just cant make it show the value from the database Unless there are oracles here, I don't think it's possible to give you any sort of a solution based on that problem description. We need at least some code.

Fredrik Andersson 2021-02-17T09:45:52.068500Z

first i just cant make the hiccup actually display the chosen value

Fredrik Andersson 2021-02-17T09:46:12.068700Z

the loaded value

Fredrik Andersson 2021-02-17T09:46:28.068900Z

I have working textboxes

Fredrik Andersson 2021-02-17T09:46:59.069100Z

(into [:select {:id "priceList"
                :name "priceList"
                :autoComplete "priceList"
                :default-value (get-in (state/customer) [:data "priceListId"])
                :class "mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"}]
      (map (fn [itm] [:option {:selected true :value (:id itm)} (:id itm)])

Fredrik Andersson 2021-02-17T09:47:09.069300Z

this is the select tag

Fredrik Andersson 2021-02-17T09:47:29.069500Z

I am trying to set :default-value on the select tag

p-himik 2021-02-17T09:49:27.069700Z

Where did you learn about :default-value?

Fredrik Andersson 2021-02-17T09:49:48.069900Z

i don't remember

Fredrik Andersson 2021-02-17T09:49:57.070100Z

i have tried many things

p-himik 2021-02-17T09:50:44.070300Z

Well, better forget about it because it's not a thing. :) Set :selected true only for that one option that should be selected. Don't set it for the rest of them.

Fredrik Andersson 2021-02-17T09:50:50.070500Z


Fredrik Andersson 2021-02-17T09:50:59.070700Z

ok, ill try that

Fredrik Andersson 2021-02-17T09:51:02.070900Z


Fredrik Andersson 2021-02-17T10:25:58.071100Z

Got this

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

p-himik 2021-02-17T10:31:30.071500Z

Oh, I stand corrected then. React has invented its own thing. Try to remove :selected completely then and just provide :value (and maybe :defaultValue as well) in the :select attributes map.

Fredrik Andersson 2021-02-17T10:49:09.071700Z

ok so :value works

Fredrik Andersson 2021-02-17T10:49:28.071900Z

however now i can't change the value

Fredrik Andersson 2021-02-17T10:49:46.072100Z

i suppose i need to implement onchange

p-himik 2021-02-17T10:51:08.072300Z

By introducing :value, you have turned the component into a controlled one. Yes, you need to provide :on-change and change the :value accordingly. Alternatively, don't provide :value (thus leaving the component uncontrolled) and just provide :on-change.

Fredrik Andersson 2021-02-17T10:51:50.072500Z

ah, ok I din't know :value did something special

Fredrik Andersson 2021-02-17T10:52:25.072700Z

i'm not very experienced in react either 😄

p-himik 2021-02-17T10:53:34.072900Z

The documentation has some of the details: It doesn't mention defaultValue however, because apparently that's what all React inputs support.

Fredrik Andersson 2021-02-17T10:53:59.073200Z