Eve Comments - Answer Overflow

Topics

Eve

•Created by abe on 10/21/2024 in #support

Confused between For and index

So if you want to redraw when a value changes, use for. If you want to redraw when an item in the array is added/removed, use index

7 replies

•Created by abe on 10/21/2024 in #support

Confused between For and index

In simplest terms, with For the value is reactive. With Index the index is reactive.

7 replies

•Created by DH on 10/19/2024 in #support

Losing reactivity when importing a signal from a library that uses SolidJS

My best guess is that the bundling process is messing something up, since importing from a clone of the source repo works fine, and importing from the npm package doesn't. Exact same test code, just toggling the path of the import statement. Unfortunately that's a little beyond my knowledge to debug.

16 replies

•Created by DH on 10/19/2024 in #support

Losing reactivity when importing a signal from a library that uses SolidJS

Works just fine in the playground.

16 replies

•Created by DH on 10/19/2024 in #support

Losing reactivity when importing a signal from a library that uses SolidJS

https://playground.solidjs.com/anonymous/e6aafd37-ee7c-460a-b38c-ce1e7d6d3b8d

16 replies

•Created by DH on 10/19/2024 in #support

Losing reactivity when importing a signal from a library that uses SolidJS

Well... the answer is, something outside of what you've posted.

16 replies

•Created by DH on 10/19/2024 in #support

Losing reactivity when importing a signal from a library that uses SolidJS

You're showing code, but you're not showing where, or how it's imported. Neither yourindex.tsx nor App.tsx appear to have any imports that relate to the code defined at the top.

16 replies

•Created by Greenman999 on 10/19/2024 in #support

Display relative time as signal

Maybe that will get you started. But you really need to read and understand the documentation on how solid works.

7 replies

•Created by Greenman999 on 10/19/2024 in #support

Display relative time as signal

https://playground.solidjs.com/anonymous/ec9bd002-d5f5-47e8-bc77-b585a591984c

7 replies

•Created by Greenman999 on 10/19/2024 in #support

Display relative time as signal

There's nothing reactive in any of that code, so how would solid react to it?

7 replies

•Created by Massukka on 10/16/2024 in #support

&& in <Show> when condition and typescript?

I'm not sure if the other way would work, but I found this much cleaner to read.

27 replies

•Created by Massukka on 10/16/2024 in #support

&& in <Show> when condition and typescript?

I had something similar, and this is what I went with

const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);

const [first, setFirst] = createSignal();
const [second, setSecond] = createSignal();
const [third, setThird] = createSignal();
const [ready, setReady] = createSignal(false);

createEffect(() => {
    if (first() && second() && third()) {
        setReady(true);
    }
});

return (
  <Show when={ready()}>
    <div>Ready</div>
  </Show>
);

27 replies

•Created by RATIU5 on 10/15/2024 in #support

How do I run an effect every change except initialization?

yeah, you're doing something wrong somewhere, because that absolutely works.

5 replies

•Created by Cyteon on 10/14/2024 in #support

template2 is not a function

if you check entry-server.tsx, you will see this

   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>

   <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>

This is what your document html structure that gets served will be. Your App component, gets mounted inside of the div#app. So by returning a body element in your App component, you're attempting to embed a second <body> inside of the div, which is not a valid HTML document.

10 replies

•Created by Cyteon on 10/14/2024 in #support

template2 is not a function

the template already has a body, so you're attempting to create a document with 2 body elements.

10 replies

•Created by hcker2000 on 10/9/2024 in #support

Any way to pass the value of an event to say an onChange handler?

also allows me to do stuff like fieldsSet().has('someField') to quickly check if a given field is included or not.

33 replies

•Created by hcker2000 on 10/9/2024 in #support

Any way to pass the value of an event to say an onChange handler?

Then whenever I want to add/remove anything, I just do something easy like setFieldsSet(fieldsSet().concat('newField'))

33 replies

•Created by hcker2000 on 10/9/2024 in #support

Any way to pass the value of an event to say an onChange handler?

What I've done in the past instead of modifying the store, is create a signal that's just an array of fields I want to show, and then read the contents I want from the actual dataStore

<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>

<For each={fieldsSet()}>
  {(field) => <div>{dataStore[field]}</div> 
</For>

33 replies

•Created by hcker2000 on 10/9/2024 in #support

Any way to pass the value of an event to say an onChange handler?

Yeah. Who knows, could come in handy some day

33 replies

•Created by hcker2000 on 10/9/2024 in #support

Any way to pass the value of an event to say an onChange handler?

Seems a weird way to do it to me, but it does work.

33 replies