Stack Overflow
Stack Overflow

Questions tagged [solid-js]

For questions related to the Solid Javascript framework (see solidjs.com)

Solid is a JavaScript library with built-in state management and fine grained reactivity for creating user interfaces.

It is a high performance alternative to React which compiles to real DOM nodes. It supports SSR, streaming and progressive hydration.

242 questions
18
votes
2 answers

SolidJS: For vs Index

In their tutorial for rendering lists, they say: The component is provided for these cases. As a rule of thumb, when working with primitives use . and cares about each piece of data in your array, and the position of that…
abc
  • 1,141
  • 12
  • 29
12
votes
2 answers

SolidJS: "computations created outside a `createRoot` or `render` will never be disposed" messages in the console log

When working on a SolidJS project you might start seeing the following warning message in your JS console: computations created outside a `createRoot` or `render` will never be disposed There are some information available on this in SolidJS'…
BenVida
  • 1,796
  • 1
  • 16
  • 25
10
votes
2 answers

How to use a web component in a solid.js project?

When I try to use a web component in my Solid.js project (instead of building one), it doesn't recognize the tag as it is not an intrinsic element. How can I setup solid.js to recognize web components?
Aero Wang
  • 8,382
  • 14
  • 63
  • 99
7
votes
1 answer

SolidJS Router useNavigate() throws: Error: Make sure your app is wrapped in a

Even though my App is wrapped in a Router tag, when I use useNavigate() or the element I get the same error login.tsx:27 Error: Make sure your app is wrapped in a Here is my index.tsx /* @refresh reload */ import { render }…
Ray Kochenderfer
  • 333
  • 1
  • 6
  • 15
7
votes
2 answers

Typescript types for Solid-js components

How do I convert the first example from the Solid-JS documentation to be valid typescript? import { render } from "solid-js/web" const HelloMessage = props =>
Hello {props.name}
render(() => ,…
SColvin
  • 11,584
  • 6
  • 57
  • 71
6
votes
2 answers

How do I simply mutate the array inside a signal

This is a working example, with a problem. I want to splice an existing array inside a signal, and return it to see it updated. But it doesn't work. How do I simply mutate the array inside a signal? I don't want to create new arrays just a simple…
eguneys
  • 6,028
  • 7
  • 31
  • 63
6
votes
2 answers

Solid JS equivalent of React.HTMLProps<...>

I have a React component with prop types like: type Props = React.HTMLProps & { to?: string; }; How do you write the equivalent prop types in SolidJS? I tried this: type Props = Component & { to?:…
abc
  • 1,141
  • 12
  • 29
5
votes
3 answers

SolidJS: input field loses focus when typing

I have a newbie question on SolidJS. I have an array with objects, like a to-do list. I render this as a list with input fields to edit one of the properties in these objects. When typing in one of the input fields, the input directly loses focus…
Jos de Jong
  • 6,602
  • 3
  • 38
  • 58
5
votes
2 answers

Why does Solid.js createEffect not re-run when a signal is in a setTimeout callback?

In Solid, why does this effect not re-run when count is updated? After some tinkering, I've found that it has to with count being in the setTimeout callback function, but what's the intuitive way to understand what things inside an effect are…
Nick
  • 16,066
  • 3
  • 16
  • 32
5
votes
2 answers

How to pass more than 1 ref to a child component in SolidJS?

Parent Component: function ParentComponent() { return (
); } Child Component: function ChildComponent(props) { return (
…
Joe C
  • 1,685
  • 2
  • 16
  • 26
4
votes
1 answer

What is the difference between useState and createSignal?

What are the differences between React's useState and Solid JS's createSignal. Do Solid's signal has benefits over React's state? import React, { useState } from "react"; function App() { const [counter, setCounter] = useState(0); return ( …
Thanirmalai Nagappan
  • 43
  • 4
4
votes
1 answer

SolidJS Context Provider Specification

I'm following context example from the tutorial, what I understand from the example is using a customized provider: import { createSignal, createContext, useContext } from "solid-js"; const CounterContext = createContext(); export function…
Typo
  • 1,875
  • 1
  • 19
  • 32
4
votes
2 answers

How to listen to only a certain value of an object in solid-js?

const App: Component = () => { const [obj, setObj] = createSignal({ name: "John", age: 30, }) createEffect( on( () => obj().name, (value) => { console.log("name", value) } ) ) return ()=>(
clencat
  • 149
  • 3
4
votes
2 answers

Difference between `createContext()` and `createSignal()` for global state

In solid-js, what is the benefit of using context, when we can create a signal and import it's getter/setter/even a memoized value from a store global store-like file?: // ./store/myValue.js export const [value, setValue] = createSignal(''); To my…
idkwhatsgoingon
  • 658
  • 4
  • 22
4
votes
2 answers

Properly narrowing down accessor type in Solid.js

I have a Solid.js code that looks like this import { render } from "solid-js/web"; import { createSignal , Component } from "solid-js"; const Number: Component<{value: number}> = ({value}) => {value} const App: Component = () => { const…
Owl
  • 6,337
  • 3
  • 16
  • 30
1
2 3
…
16 17