ivan Posts - Answer Overflow

ivan

•Created by ivan on 3/8/2024 in #support

Issue subscribing to store changes

I am having trouble understanding why the onClick event of my button in this playground code snippet does not update the UI, if you click on the add sub questions button, it will change the underlying data in the store, but none of the UI elements get re rendered, the error messages from solid playground are not helping either, pls help, here is the playground link https://playground.solidjs.com/anonymous/8675c6e7-3b73-4562-a127-16d43d336f76

37 replies

SSolidJS

•Created by ivan on 3/8/2024 in #support

I have no clue what I am doing wrong

Hello, I am very new to Solid, I am working with stores right now to represent this data structure:

const question = {
  title: String,
  id: number,
  sub_questions: question[]
}

const question = {
  title: String,
  id: number,
  sub_questions: question[]
}

I am using a store to store an array of these questions, and have an App component that renders them

function App() {
  const default_question = 
    { title: "question", id: 0,  sub_questions: []} 

  const [questions, setQuestions]=createStore([default_question]);  
  return <>
    <ol>
      <For each={questions} fallback={<div>No questions saved</div>}>
        
        {(question,i) => {
           return <li>
           <input 
            type="text" 
            value={question.title} 
            onInput={e => setQuestions(i(),"title",e.target.value)}
          />

          <For each={question.sub_questions} fallback=<p>no subquestions</p>> 
            {(sub_question, j) => {
            return (
                <input 
                  type="text" 
                  value={sub_question.title} 
                  onInput={e => setQuestions(i(), "sub_questions", j(), "title", e.target.value)}
                />
              )
            }}  
          </For>         
          <button onClick={_ => setQuestions(0,"sub_questions",q=>[...q,{title:"s",id:0,sub_questions:[]}])}>
            add sub question to question #{i()+1}
          </button>
          </li>
        }}
      </For>
    </ol>
    <button onClick={_ => setQuestions((questions) => [...questions, default_question])}>
      add question
    </button>
 </>
}

function App() {
  const default_question = 
    { title: "question", id: 0,  sub_questions: []} 

  const [questions, setQuestions]=createStore([default_question]);  
  return <>
    <ol>
      <For each={questions} fallback={<div>No questions saved</div>}>
        
        {(question,i) => {
           return <li>
           <input 
            type="text" 
            value={question.title} 
            onInput={e => setQuestions(i(),"title",e.target.value)}
          />

          <For each={question.sub_questions} fallback=<p>no subquestions</p>> 
            {(sub_question, j) => {
            return (
                <input 
                  type="text" 
                  value={sub_question.title} 
                  onInput={e => setQuestions(i(), "sub_questions", j(), "title", e.target.value)}
                />
              )
            }}  
          </For>         
          <button onClick={_ => setQuestions(0,"sub_questions",q=>[...q,{title:"s",id:0,sub_questions:[]}])}>
            add sub question to question #{i()+1}
          </button>
          </li>
        }}
      </For>
    </ol>
    <button onClick={_ => setQuestions((questions) => [...questions, default_question])}>
      add question
    </button>
 </>
}

I have no idea why, but each update I add a sub_question via the onlclick setQuestions, it updates the whole store to have the same values for each question in the question array, I have not found a way around this/why it is happenings, pls help. I have tried using a fixed index 0 for the setQuestions function, but this way still updates ALL the questions in the array each time i add a sub question to the fist item in the array. pls help

25 replies

SSolidJS

•Created by ivan on 3/5/2024 in #support

how to efficiently make nested data structures in solid

Hello, I am new to Solid atm, but am aware of some reactivity principles like singals, memos, effects, etc. I was wondering what is the best way to go about implementing UI for a data structure that is nested (one of its elements is itself). For my usecase. I have an object called Questions. Each question can have sub-questions inside it , the object basically looks like this

const questions = {
   body: "", //the text inside the question, e.g. "when did x happen",
   id: 0, //just an id used for dynamic rendering keys,
   sub_questions: [questions] // an array of sub-questions, which all have the same body, id, sub_questions fields as their parent question structure
}

const questions = {
   body: "", //the text inside the question, e.g. "when did x happen",
   id: 0, //just an id used for dynamic rendering keys,
   sub_questions: [questions] // an array of sub-questions, which all have the same body, id, sub_questions fields as their parent question structure
}

now, in theory, the Ui for a questions body shouldn`t update when its sub_questions update, but I am having trouble understanding how to implement something like this with signals, I come from React so I have never really actually used signals, so pls help me out. Any help is appreciated thank you

6 replies

Gaming

Programming