nikivi Posts - Answer Overflow

I have this code: https://github.com/nikitavoloboev/kuskus Here I do conditional render of NewTodo: https://github.com/nikitavoloboev/kuskus/blob/main/src/pages/Today.tsx#L14 Here is input with autofocus https://github.com/nikitavoloboev/kuskus/blob/main/src/components/NewTodo.tsx#L37 For some reason when I create a first todo, autofocus works but second time it does not. Even though solid mounts it twice. onMount runs twice. What is going wrong? Is there a better way to achieve bringing focus to input box?

193 replies

SSolidJS

•Created by nikivi on 2/16/2023 in #support

How would I wrap over some p5.js code to create a solid component

I want to make confetti in Solid. I found this Codepen: https://codepen.io/Gthibaud/pen/ENzXbp I am thinking though how can I use it. Do I have to rewrite the js code to work for solid or can I wrap over p5.js somehow and put it inside my solid app? API wise I want to essentially create <Confetti /> and then have conditional render in one of the routes to render <Confetti /> for say 2 seconds after successful form submit.

2 replies

SSolidJS

•Created by nikivi on 2/10/2023 in #support

Don't fully understand solid's reactivity, help understand with a case

I have this repo https://github.com/Kisuyo/todo I created a component: https://github.com/Kisuyo/todo/blob/master/src/components/HamburgerMenu.tsx I also created a route with a signal: https://github.com/Kisuyo/todo/blob/master/src/routes/index.tsx#L22 I am coming from react so perhaps this is confusing to me but I thought that as I pass both the signal and the setter of signal to component here: https://github.com/Kisuyo/todo/blob/master/src/routes/index.tsx#L42 I thought when I try to change the signal state the dom should update but it doesn't. Doing solid tutorial again perhaps I misunderstand how reactivity works. Thank you for any help.

6 replies

SSolidJS

•Created by nikivi on 1/16/2023 in #support

How to do nested <For

I have a signal that is array of arrays

  const [grid, setGrid] = createSignal([
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 3, 0, 0, 0, 1],
    [1, 0, 0, 4, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
  ])

  const [grid, setGrid] = createSignal([
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 3, 0, 0, 0, 1],
    [1, 0, 0, 4, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
  ])

I want to render it out on screen and for solid to update it. However I read https://www.solidjs.com/tutorial/flow_for and still not too sure how to do nested <For. I tried this:

  return (
    <main class="Main">
      <div class="boxWrapper">
        <For each={grid()}>
          {(row, i) => (
            <For each={row}>
              <div>{row}</div>
            </For>
          )}
        </For>
      </div>
    </main>

  return (
    <main class="Main">
      <div class="boxWrapper">
        <For each={grid()}>
          {(row, i) => (
            <For each={row}>
              <div>{row}</div>
            </For>
          )}
        </For>
      </div>
    </main>

But it doesn't work. In react it's quite simple, I just do

  return (
    <main class="Main">
      <div class="boxWrapper">
        {grid().map((row) => {
          return row.map((box) => {
            return <div class="box">{box}</div>
          })
        })}
      </div>
    </main>
  )

  return (
    <main class="Main">
      <div class="boxWrapper">
        {grid().map((row) => {
          return row.map((box) => {
            return <div class="box">{box}</div>
          })
        })}
      </div>
    </main>
  )

Thanks for any help.

100 replies

SSolidJS

•Created by nikivi on 1/16/2023 in #support

how can I use createEffect so it doesn't rerun when certain signals change

my code: https://github.com/nikitavoloboev/test/blob/main/solid-start/src/routes/snake.tsx

37 replies

Gaming

Programming