Questions tagged [solid-js]
For questions related to the Solid Javascript framework (see solidjs.com)
solid-js
296
questions
27
votes
3
answers
6k
views
SolidJS: For vs Index
In their tutorial for rendering lists, they say:
The <Index> component is provided for these cases. As a rule of thumb, when working with primitives use <Index>.
and
<For> cares ...
- 1,409
19
votes
2
answers
7k
views
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 ...
- 2,132
13
votes
2
answers
3k
views
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?...
- 9,029
11
votes
1
answer
4k
views
SolidJS Router useNavigate() throws: Error: Make sure your app is wrapped in a <Router />
Even though my App is wrapped in a Router tag, when I use useNavigate() or the <Navigate /> element I get the same error login.tsx:27 Error: Make sure your app is wrapped in a <Router />
...
- 393
8
votes
2
answers
5k
views
Typescript+SolidJS: how can I extend props of some JSX element?
How can I extend in SolidJS props of some existing JSX element and create my custom interface like this ButtonProps interface in the given below example for React.
import React from 'react';
...
- 1,263
8
votes
2
answers
6k
views
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 => <div>Hello {props....
- 12.8k
8
votes
2
answers
4k
views
How to pass more than 1 ref to a child component in SolidJS?
Parent Component:
function ParentComponent() {
return (
<section>
<ChildComponent ref={sectionRef} ref1={headerRef} />
</section>
);
}
Child Component:
function ...
- 1,795
7
votes
2
answers
3k
views
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 ...
- 16.5k
7
votes
2
answers
1k
views
Solid JS equivalent of React.HTMLProps<...>
I have a React component with prop types like:
type Props = React.HTMLProps<HTMLAnchorElement> & {
to?: string;
};
How do you write the equivalent prop types in SolidJS? I tried this:
...
- 1,409
6
votes
3
answers
4k
views
How to update local storage values in SolidJS using hooks
I'm trying to make a custom "hook" for solid-js that will retrieve state from local storage.
import { Accessor, createSignal, Setter } from "solid-js";
export default function ...
- 2,535
6
votes
3
answers
3k
views
SolidJS: Is there a way to pass in an object to the first param of `createResource`
Is there a way to pass in an object to the first param of createResource? For example: I am trying the following and it is not working:
const [val] = createResource(props, req);
I have also tried a ...
- 887
6
votes
3
answers
2k
views
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 ...
- 6,771
6
votes
2
answers
2k
views
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() {
...
6
votes
2
answers
6k
views
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 ...
- 6,268
5
votes
2
answers
2k
views
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 ...
- 691
5
votes
1
answer
4k
views
How to use Ref in Solid.js?
So i am learning and start play around with Solid.js, and I want to know how do we handle ref in solid.js like useRef in react.
I check the doc I try something like this:
let navigationOuterRef: ...
- 778
5
votes
1
answer
3k
views
Difference between how Solid and Svelte works?
I believe Solid and Svelte work pretty much the same way, using reactive graphs for calculations.
The difference is that Solid does it in explicit way, using functions, and Svelte does the same thing, ...
- 14.7k
4
votes
3
answers
3k
views
Conditional styling in SolidJS
I have a Component in SolidJS that looks something like this:
const MyComponent: Component = (params) => {
// ...
const [votes, setVotes] = createSignal(new Set());
const toggle = (val: ...
- 530
4
votes
1
answer
3k
views
Typescript - Solid.js <select> onchange event: Property 'value' does not exist on type 'EventTarget'
In the following example, if I don't do ?. for the event.target.value, typescript has the error Object is possibly null. With the ?. I get the error Property 'value' does not exist on type '...
- 6,803
4
votes
1
answer
975
views
Difference between Resumability , Hydration and Reconcillation in modern web app?
What are the main differences between Resumability , Hydration and Reconcillation ?
We know Resumability is future of web app, Is it possible to make most of the current meta framework (Nextjs,Remix, ...
- 1,291
4
votes
3
answers
3k
views
How to iterate over solid-js children with typescript annotations
Say I have the following component, how would I iterate over and render each child to do stuff like wrapping each child with other components?
interface StuffProps {
children: `?`
}
function Stuff({...
- 5,098
4
votes
1
answer
3k
views
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 ...
- 1,900
4
votes
1
answer
4k
views
SolidJS: For in child component not rendering list
I have a parent component returning:
<List list={list()}>
{(item, index) => <div>{item}</div>}
</List>
where list is a created signal. List is a custom component I made ...
- 1,409
4
votes
2
answers
2k
views
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) => {
...
- 149
4
votes
1
answer
3k
views
SolidJS: How to trigger refetch of createResource?
I have a createResource which is working:
const fetchJokes = async (programmingOnly) => {
alert(programmingOnly);
return (await fetch(`https://official-joke-api.appspot.com/jokes/${...
- 8,446
4
votes
2
answers
2k
views
How can I react to changes in the window size in SolidJS?
Simple question. How can I react to changes in the window size in solid-js? I need to do some computations with document.body.clientWidth, but I can't get anything to re-execute when that changes. I'...
- 512
4
votes
2
answers
2k
views
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}&...
- 6,735
4
votes
2
answers
1k
views
How to get the previous value for a solidjs signal?
I want to get the previous value of a signal how?
const [route, setRoute] = createSignal(1)
createEffect(() => {
console.log('route previous value is', route(0))
console.log('route updated ...
- 6,268
4
votes
1
answer
531
views
SolidJS Uncaught Error: <A> and 'use' router primitives can be only used inside a Route
I got some issues with my solidjs (Vanilla JS) code. I try to build a small three page Website, just to print out some Information. I use vitejs, solidjs and tailwindcss. I was able to build the ...
- 53
3
votes
3
answers
2k
views
SolidJS: Why does destructuring of props cause a loss of reactivity?
Props are what we call the object that is passed to our component function on execution that represents all the attributes bound to its JSX. Props objects are readonly and have reactive properties ...
- 710
3
votes
1
answer
2k
views
Does Solid JS have an equivalent of React.useCallback?
Solid has createMemo which I thought might work, but it says "The memo function should not change other signals by calling setters (it should be "pure").", which is not suitable ...
- 1,409
3
votes
2
answers
905
views
What's the proper way to switch between dark and light modes on SolidJS + SUID?
I'm kind of new to SolidJS, and now I'm trying to work out how SUID's ThemeProvider differs from SolidJS's (e.g. this docs provider/context example). A simple example would be how to switch between ...
- 6,863
3
votes
2
answers
2k
views
Dynamic tag name in Solid JSX
I would like to set JSX tag names dynamically in SolidJS. I come from React where it is fairly simple to do:
/* Working ReactJS Code: */
export default MyWrapper = ({ children, ..attributes }) => {
...
- 692
3
votes
1
answer
1k
views
SolidJS: Typescript error says value is of type 'undefined' despite checking that it isn't
I have some SolidJS code like:
{value() !== undefined && <img src={srcs[value()]} />}
where value is a signal. I get a TypeScript error under value() saying Type 'undefined' cannot be ...
- 1,409
3
votes
2
answers
900
views
Astro hydration saying not working on renderer
Why I keep getting this error message saying no renderer for react and solidjs ? also why the React component didn't appears on the screen? Below price supposed to be appear a button "add to cart&...
- 1,615
3
votes
1
answer
1k
views
Detect HMR event with ViteJS React/SolidJS
Using ViteJS starter for React / SolidJS,
How can I detect (using some sort of js callback) before HMR reload is triggered by code changes? (to do some cleanup)
To be clear, I'm not asking how to use ...
- 5,015
3
votes
1
answer
1k
views
is there an event like onRouteChange in SolidJs?
I need to run some logic every time the url changes.
My application uses solid-app-router
https://github.com/solidjs/solid-router
How can I subscribe to router changes in SolidJS?
- 4,297
3
votes
2
answers
1k
views
How to add multiple events handlers to Solid.js components on the same HTML element?
Overview
I'm new to Solid.js and am looking for a way to add multiple event handlers to the same HTML element from different components in JSX. This is simple to do in Vue but it appears that events ...
- 97
3
votes
3
answers
3k
views
SolidJS - How to trigger createEffect using an external dependency?
Is there a way to trigger Solid's createEffect using an external dependency, as with React's useEffect dependency array?
I want to call setShowMenu on location.pathname change.
const location = ...
- 1,612
3
votes
3
answers
1k
views
How do you get an HTML string from JSX without React. I'm using SolidJS for example
I'm not using React, so this won't work
ReactDomServer.renderToString(<div>p</div>)
I'm currently rendering the jsx in a hidden div with an id on the browser and then using
document....
- 908
3
votes
1
answer
869
views
Passing directive as props
For example I have a simple directive like this:
export const inputLogger = (el: HTMLInputElement) => {
const onInput = (e: Event) => {
console.log((e.currentTarget as ...
- 6,735
3
votes
2
answers
1k
views
Detect click outside and change state of component on Typescript (SolidJS)
i learn SolidJS framework and have problem. I want to change state of element with directives, but it dont work. What do i do wrong? Full project - https://github.com/XPahanX/editor (not actual)
...
- 35
3
votes
1
answer
1k
views
Why to use Context and Provider given SolidJS reactivity?
I have this SPA project which authenticates and authorizes its users via access tokens (JWT). These short-lived access tokens has their refresh tokens as well, so when they expire the app should ...
- 784
3
votes
2
answers
2k
views
Solidjs router does not render
I already searched a lot and could not find an answer. In my SolidJs app, the second route is not redered in root element:
import { Routes, Route, useLocation } from "solid-app-router"
...
3
votes
1
answer
728
views
Nested createEffect doesn't refire
I am not sure, if I have correctly reproduced my problem but here it is:
On render signal, I have some sort of object creation that leads to more create effects that depend on update signal. But ...
- 6,268
3
votes
1
answer
2k
views
How to update list items inside child components using Solid JS?
I am new to Solid.js, and am not finding existing docs or Q/A to be very helpful.
I have a situation, which I'm sure is a common one, where I want to draw a list of objects as Components that will ...
- 33
3
votes
1
answer
3k
views
SolidJS: Updating component based on value served by Context's store?
In React all props are updated and propagated to children automatically which is nice but it slows down and requires lots of optimization at some point.
So I'm building an app with SolidJS using ...
- 33
3
votes
1
answer
1k
views
SolidJS Create Resource - Uncaught Error in Promise
I'm new to SolidJS and I'm having a weird error with resources. Here is my code:
export const authUserResource = createResource(
() => axios.get<AuthUser>('/expense-tracker/api/oauth/user'...
- 6,035
3
votes
1
answer
1k
views
parcel serve works but parcel build does not
I'm setting up a new project with Parcel, TypeScript, and SolidJS. With the exception of TypeScript, I'm fairly new to this tech stack. I've gotten the ts and tsx targets building exactly the way I ...
- 148k
3
votes
0
answers
593
views
SolidJS & Vitest - No named export called "hydrate"
I'm new to SolidJS, trying to learn it right now. I come from a mainly React background, and I really like the concepts at work here. Anyway, I'm trying to get vitest to work, I've set things up ...
- 6,035