Fork me on GitHub
Fredrik Andersson09:02:58

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


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 Andersson09:02:33

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

Fredrik Andersson09:02:39

i have a subscription to a firestore backend

Fredrik Andersson09:02:14

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


> 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 Andersson09:02:52

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

Fredrik Andersson09:02:28

I have working textboxes

Fredrik Andersson09:02:59

(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 Andersson09:02:09

this is the select tag

Fredrik Andersson09:02:29

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


Where did you learn about :default-value?

Fredrik Andersson09:02:57

i have tried many things


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 Andersson10:02:58

Got this

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


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 Andersson10:02:09

ok so :value works

Fredrik Andersson10:02:28

however now i can't change the value

Fredrik Andersson10:02:46

i suppose i need to implement onchange


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 Andersson10:02:50

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

Fredrik Andersson10:02:25

i'm not very experienced in react either 😄


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