Reactivity issues
Hi. I am coming back to Solid after a long hiatus for a brand new project. I have been stuck trying to solve a very annoying reactivity issue that I have.
I have an object in a signal (I do not use a store because I want it to be undefined), value of which gets passed to a component via a prop. There are also props for modifying that object. This object has an array of other objects, and I am using
Index to render it. Whenever I remove an object from that array, its data gets "shifted" around, until I modify an attribute of that array that has an effect on rendering. Using For fixes this issue but it introduces a plethora of other bugs, like the settings popover for that object losing focus from the text input element (because the element based on that object data is being remade, including the settings popover). I asked LLM AIs to no avail. In Vue, I'd usually fix that by assigning it a different key value to trigger a rerender.
I am lost and confused, please point me to the right direction....Cookies, SSR, and CSR
The app that I'm buliding will have 3 URLs:
- www.mywebsite.com = marketing site
- app.mywebsite.com = the application
- api.mywebsite.com = REST API
...
Pass props to component via navigation
I am building the registration flow of an application.
/register captures email + password
/verify captures the verification code that was sent via email
...Invalid import by kobalte
I get the following error when trying to run my vitest tests (sorry, I'm unable to copy the text itself).
Have you seen anything similar?
Thanks.
Image...
I'd like to run some code in my component, but only once.
I cannot put it in dependency-less
createEffect, since it is supposed to run some time after the component is first rendered, but it must never be run more than once during the component lifecycle. I thought I'd use a local Boolean variable for that, like this:
```
function MyComponent() {
const [dataLoaded, setDataLoaded] = createSignal(false);
let actionPerformed = false; // This flag ensures the action runs only once...Reactivity issues in Solid with vanilla HTML and JavaScript
I'm trying to use Solid with vanilla HTML and JavaScript. The only information I found is in the old documentation, but it doesn't seem to work for me.
The problem I'm facing is that neither the HTML tagged template nor the hyperscript functions are enabling reactivity. In this code, you can see that the rendered counter doesn't update. What am I doing wrong?...
how to use solid router with tauri and a sqlite database
I am making a Tauri app that has a pretty basic database to hold lists and projects created by the user. I currently have a singleton database class with functions for database actions like this:
```ts
import Database from "@tauri-apps/plugin-sql"
export class MyDB {...
Problem with SolidJS router
Hello,
I'm currently making a web application and I can't seem to get this right. I'm trying to create a router hierarchy with a page wrapper containing a navbar, but somehow only my navbar is being rendered, my homepage (or any other pages when I click on them, even if they're just divs with text in this case) isn't.
Main.tsx:
```tsx...
Submitting forms with a non-JS backend
My web application is a SPA that talks to a Go backend. I have the following questions:
- Should I be using
action(...) and useSubmission(...) or should I be using a callback bound the form's onsubmit property?
- It seems actions have the option to either run on client or server side. In my scenario, I would be using the logic in action to a) validate the input elements and b) make an asychronous call to the Go server with the form data. Is it always necessary for my to provide the action name (as the second arg) to action(...). Seems strange to have to provide it even if I don't plan to use actions on the server side.
- If I understand correctly, action(...) won't work unless I have marked my form with method="post". Is it bad if I make a PUT request inside of the action despite having marked my form with method="post"?...Getting context in click event (TanStack table + SolidUI)
So to get the x out of the way: I have a data table with a few thousand items, and I want to open a dialog (modal) when clicking on a row.
Instead of creating one SolidUI Dialog element (with all its content and trigger) per row, I wanted to create a single dialog at the root level and set its open state and content based on the row clicked.
So I made my context, wrapped my root in the provider (there's a bit of oddity here because SolidUI doesn't provide wrapping for the underlying kobalte context, but I'm fairly sure I did this correctly if not nicely), and then made an useContext wrapper. Now, if I use this wrapper in a component (Route.tsx line 36) it works fine, dialog pops up, content is in there. However, if I try to useContext in an onclick in a cell (line 25), useContext return null / the wrapper throws an error....
how to use createAsync to feed createSignal
How should i guarantee that my signals are initialized AND fed with the
Acessor from createAsync, while using <Suspense> ?
The documentation doesn't make clear how the Acessor created by createAsync interacts with createSignal. Will the createSignals correctly intereact with <Suspense>?
Which one of these two solutions would be the correct/recomended?
...Lazy route error
Hi i am trying play with my small project written in solidjs
But after i update solid and solid start i am getting this error
...
Drag & Drop library
Hello,
I need to implement drag & drop and I was looking for the best option between :
-
@thisbeyond/solid-dnd
- SortableJS (even if there is not a solid adapter)...How to get simple reactivity to work within unit tests?
Hi, I'm probably missing something very obvious here, but I can't get this simple unit test to pass. I've been using solid for years but this is the first time I've actually tried to do this:
```js
test('reactivity', () => {
// createRoot(() => {...
How to have active Anchor for "sibling" URL?
<A href="/abc/def/1" activeClass="activeLink">[1]</A>
<A href="/abc/def/1" activeClass="activeLink">[1]</A>
/abc/def/1, the anchor has active link class, but not on /abc/def/<N>...Why does "use server" not prevent console logs from appearing in the browser console?
Question:
According to the documentation, there are two ways to create a server function. One is to add the
"use server" directive at the top of the file, which makes all functions in that file execute only on the server and prevents them from being bundled into the client. The other is to add "use server" at the beginning of a specific function, which ensures that only that function executes on the server and is not bundled into the client.
Here is my code:...Broken reactivity from props
Does createResource not refetch if used like so?
...
export default function Icon(props: IconifyIconProps) {
const [local, rest] = splitProps(props, ["icon"]);
const [data] = createResource(() => getIcon(local.icon));
export default function Icon(props: IconifyIconProps) {
const [local, rest] = splitProps(props, ["icon"]);
const [data] = createResource(() => getIcon(local.icon));
solid/reactivity in mapArray
I have a component like this: https://playground.solidjs.com/anonymous/99d5bc2a-4411-43f2-af85-47515937c622
eslint-plugin-solid is giving me this warning (twice):
```...solid/reactivity with component ref
Hi. I enabled the solid eslint plugin and going through warnings I came across this case:
https://playground.solidjs.com/anonymous/b30f1656-5be1-4dd2-9d22-11cbf4067c6b
Warning is this:
```...
Understanding behavior of rendering list of objects using For
I have an array of User objects ({id, name, age, hobbies}) that I would like to render into a list of HTML div elements that display the contents of the objects (fields and associated values). I know I can use the built-in For element to render this list.
I need help understanding the differences between using signals vs stores in terms of whether or not the entire list of HTML div elements will be re-rendered in the following scenarios:
1. Insert a new User object in the middle of the array...