Clojurians Log v2

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.

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

i have a subscription to a firestore backend

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.

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

the loaded value

I have working textboxes

(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)])
           (state/price-lists)))]]]

this is the select tag

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

Where did you learn about :default-value?

i don't remember

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.

haha

ok, ill try that

thanks

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.

ok so :value works

however now i can't change the value

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.

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

i'm not very experienced in react either 😄

The documentation has some of the details: https://reactjs.org/docs/forms.html#the-select-tag It doesn't mention defaultValue however, because apparently that's what all React inputs support.

thanks!