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[]
}
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>
</>
}
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