SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

5/11/2023

How to make the navbar change color when it's sticky like in the Solidjs homepage?

I only could come up with this. 400 is a fixed value for now, I should probably change it. Any suggestions? ``` const [bgColor, setBgColor] = createSignal(false); const changeBgColorHandler = () => { if (window.scrollY >= 400) {...

romanobro

5/10/2023

cant access global signals inside onMount?

Hello, I want to set a list of notes to contain the data inside an async fetch request. To do this, I want to fetch the data on page mount, then use that data to fill the notes signal. But, this is causing an error and I do not know why. The error message is "cannot access 'notes' before initialization", but I thought that the notes signal would be initialized first. Thank you

FjordWarden

5/10/2023

createResource does not working with json()

Why does text() work but json() does not:

``
let [schema1] = createResource(async _ => await (await fetch(

https://api.localhost/`)).json()); let [schema2] = createResource(async _ => await (await fetch(https://api.localhost/)).text())...

lars

5/10/2023

updating a tree of nodes in a SolidJS store

hey y'all. i'm trying to build a tree view where nodes have an isExpanded state i'm having a tough time trying to update the corresponding node. below is the approach i've tried but it doesn't trigger a component update for whatever reason. if there's a totally different way to do this, then i'm all ears ```typescript...

matulla_ffm

5/10/2023

Navbar re-renders

Other than with solidjs, with solid-start using the "A" Component my Navbar reloading every time i click on a Link. How can i avoid this behavior?...

Shonty

5/9/2023

Problem with ref

Hi, I used to set ref like in this example, but it seems that when I use solidjs router, it doesn't work after unmounting and remounting the component (the ref return undefined). Is this normal behavior and should I use createEffect instead of onMount ?...

PureSoul

5/9/2023

CreateStore types not work for array

const [store, setStore] = createStore([{
    lotNumber: '',
  }]);

const [store, setStore] = createStore([{
    lotNumber: '',
  }]);

...

Ladvace

5/9/2023

Children helper break Context

I made a snippet to better show the problem, I tried looping the props.children instead of using the helper but it didn't really work https://playground.solidjs.com/anonymous/2ad2d60f-5f41-4a3b-abf5-6f9507c6c248...

Grahf

5/8/2023

MotionOne with solidStart

I was trying to experiment with using MotionOne with SolidStart. I installed it. Used this code: ```import { Motion } from 'motion/solid' export default function Home() { return (...

matulla_ffm

5/8/2023

i expect a refetch with new data when the value of "firma()" changes - but this don't work.

export function routeData({ params }) { return createServerData$( () => prisma.DP_T_Mitarbeiter.findMany({ where: { Betrieb: firma() } }), { key: () => ["DP_T_Mitarbeiter", firma()] }...

Grahf

5/8/2023

route.outlet is not a function

I installed the solid transition group and tried using it. Ever since then I get "router.outlet is not a function" error and the page wont load. I uninstalled solid transition, reset changes to my package lock json, ran npm i, ran npm run dev, commented out large portions of my code.... and it's still "router.outlet is not a function"...

Samual 🦢

5/7/2023

basic progressively enhanced counter not working

In my project I was running into an issue where I was getting the initial state of a variable so I made a minimal reproduction```js // src/routes/index.tsx import { useRouteData } from "solid-start" import { createServerAction$, createServerData$, redirect } from "solid-start/server" ...

LKB

5/7/2023

ErrorBoundry component not works

hi now i am doing official-tutorial : https://www.solidjs.com/tutorial/flow_error_boundary I copy-and-paste this code in my vite project. the full-code is below this ...

arazorda

5/7/2023

SSR, Reactivity of Signals on onMount

Hey guys, I've got couple of signals in the view, which are strings and I'm sending default values via SSR, then on onMount, I'm changing values of these signals. If I put console log inside createEffect, I see that values are changed, but it's not being changed in the view. Also, if I add timeout of signal updates in onMount, for like 200-300ms, I see that values change in the view as well. ...

Thomas

5/6/2023

Flickering UI with solidstart

When I am on dark mode with tailwindcss and I navigate between routes for the first time, the theme is for a moment light before going dark. This is very bad for user experience. issue happens when: - first load - reloading page...

zh0nb

5/6/2023

onClick event does not get fired

Hi everyone, I'm facing a weird issue where onClick events are not fired if I use them within a For loop. The button that's outside of the for loop (.working-button) is working fine, but the rest are not working at all. This is the component's code (I'm using nanostores since I'm embedding this within an Astro website with client:load). You can see my code here:...

Braveheart

5/5/2023

suspense + store

if I have a form tied to a store that gets populated async, how do i use this with <suspense so i don't need loading state management

Je Suis Un Ami

5/4/2023

props.children is not defined.

I have this component. ``` const AuthProvider: Component<AuthContextProps> = (props) => { /// the local store. const [tokenStorage, setTokenStorage] = createLocalStorage({...

Dastrus

5/4/2023

Using For in combination with createStore array of arrays property

Hello all. I've run into an issue with regards to using a store which contains a property that's an array of string arrays. The issue is that it rerenders all the JSX that's in the For callback for that index. It kinda looks like the following: const [store, setStore] = createStore({ synonyms: [['test_1', 'test_2'], ['test_3', 'test_4']], ...other_properties }); const onChange = (value: any, index: number) => {...

Madaxen86

5/3/2023

Context.Provider breaks reactivity

Need help with a simple Context Provider issue. Here's a little sample of the code:

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

...

Previous Next

Gaming

Programming

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.