Rafael Hengles Posts - Answer Overflow

Rafael Hengles

Explore posts from servers

•Created by Rafael Hengles on 3/15/2024 in #support

events not fired inside react modal

I can't provide a small reproduction, I tried but I couldn't. I have a react project with reactstrap, and I'm using their standard Modal component. Inside of it, I'm mounting a Solid app ( I already have other Solid apps working normally inside of React but outside of the modal ). This app is not firing any click event handlers from Solid. There are no layers above in CSS. I can't figure it out for the life of me. I'm just hoping someone else has found this problem before and have any insights I can use to fix this. In the moment, I'm trying to create my own modal component to see if the problem is in reactstrap somehow. Thanks.

10 replies

SSolidJS

•Created by Rafael Hengles on 6/22/2023 in #support

typescript cssproperties

Solid accepts a type CSSProperties in style attributes. I want to createMemo() with a style value, but I can't type it with CSSProperties type from Solid. What do I do ?

3 replies

SSolidJS

•Created by Rafael Hengles on 6/20/2023 in #support

Dynamic Fragment

Is it possible for me to create a Fragment <> </> with the <Dynamic> tag ? Does Solid export a Fragment component that I can pass to Dynamic ?

4 replies

SSolidJS

•Created by Rafael Hengles on 6/13/2023 in #support

setstore mutate more than one property in one call

Assume I have a store with a list of objects. Can I write a single call to setStore() (without produce or reconcile) that modifies two or more properties of one or more objects in the array ? In other words, if produce and reconcile already do this, how do they do it ? What do they return that enables them to mutate one object (not replace it, because it causes components with For to be recreated instead of updated) and change two or more properties in one go ? Example:

  const [storeVal, setStoreVal] = createStore({
    a: [
      { b: 1, c: 2 },
      { b: 3, c: 4 },
    ],
  })
  const update = () => {
    setStoreVal('a', () => true, (ps, tv) => {
      console.log(`prevState, traversed`, { ps, tv })
      return { ...ps, b: ps.b + 1, c: ps.c + 2 }
    })
  }

  const [storeVal, setStoreVal] = createStore({
    a: [
      { b: 1, c: 2 },
      { b: 3, c: 4 },
    ],
  })
  const update = () => {
    setStoreVal('a', () => true, (ps, tv) => {
      console.log(`prevState, traversed`, { ps, tv })
      return { ...ps, b: ps.b + 1, c: ps.c + 2 }
    })
  }

The code above replaces the entire object. Again, it is a problem because it causes components with <For> to be recreated. Can I mutate two or more properties in one setState call without produce() or reconcile() ? What they do under the hood ?

12 replies

SSolidJS

•Created by Rafael Hengles on 6/9/2023 in #support

how to avoid child component re-creation with For

I have a store that is a list of tuples: each tuple is like ["type as string", { item, props }]. One of these items contains a value that I want to change like a controlled input, with a 'value' and a 'setValue' prop. The problem is that when I call "setStore" to update the item value, the entire tuple is a new tuple with the changed value, it's not the same old tuple with the value mutated in place. I use the <For> component to render this store list. AFAIU, when the For sees a new tuple, it removes the old <div> created by my component and recreates it all over again. How can I have a store that is a list of tuples and change one value in this tuple without Solid re-creating my child components all the time ?

16 replies

Gaming

Programming