Is it good practice to hardcode the text field on Listbox?
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I'm using Listbox to select an active element and apply a custom CSS to it after I select it.
However, I feel like it's a nuisance to be hardcoding every time the text
<ListboxItem className={`${selectedKeys.has("text") ? " bg-red-50" : ""}`} key="text">Text</ListboxItem>However, I feel like it's a nuisance to be hardcoding every time the text
text under the has method to apply it to it everytime this element is picked. Is there a way to extract the html, lowercase it and do a comparison between the selected item and the html within that element? Would this be a good practice? What would be the best approach? Would I have to manually input the text for every single rest of the items? <ListboxItem className={``} key="number">Number</ListboxItem>
<ListboxItem className={``} key="date">Date</ListboxItem>
<ListboxItem className={``} key="single_date">Single Date</ListboxItem>
<ListboxItem className={``} key="iteration">Iteration</ListboxItem>1 Reply
@Transvaal lion I'm using Listbox to select an active element and apply a custom CSS to it after I select it.
tsx
<ListboxItem className={`${selectedKeys.has("text") ? " bg-red-50" : ""}`} key="text">Text</ListboxItem>
However, I feel like it's a nuisance to be hardcoding every time the text `text` under the `has` method to apply it to it everytime this element is picked. Is there a way to extract the `html`, lowercase it and do a comparison between the selected item and the `html` within that element? Would this be a good practice? What would be the best approach? Would I have to manually input the text for every single rest of the items?
tsx
<ListboxItem className={``} key="number">Number</ListboxItem>
<ListboxItem className={``} key="date">Date</ListboxItem>
<ListboxItem className={``} key="single_date">Single Date</ListboxItem>
<ListboxItem className={``} key="iteration">Iteration</ListboxItem>
I think you could probably just create a new component with this logic. something similar to this:
then you can use it like this:
function SelectedListboxItem = ({ keys, id, children }) => {
return (
<ListboxItem className={`${selectedKeys.has(id) ? " bg-red-50" : ""}`}>{children}</ListboxItem>
)
}then you can use it like this:
<SelectedListboxItem keys={selectedKeys} id="number">Number</SelectedListboxItem>