Recently, I have been working on some code in SolidJS.
Specifically, I am utilizing createSignal to handle the rendering of certain views based on changes within the options array.
import { render } from "solid-js/web";
import { createSignal, Show, Index } from "solid-js";
const optionsList = [
{
title: "ReactJs",
subtitle: "A front-end framework for building views on the web",
selected: false
},
{
title: "SolidJS",
subtitle: "Lorem, ipsum dolor sit amet consectetur adipisicing.",
selected: false
},
{
title: "MumboJumboJS",
subtitle: "null",
selected: false
}
]
export default function CheckboxArea(props) {
const [options, setOptions] = createSignal(props.options);
console.log(options())
function handleOnClick(index: number) {
console.log("Click")
const op = options()
op[index].selected = true
setOptions(op)
}
return(
<div>
<Index each={options()}>{(each_option, index) =>
<div onClick={() => handleOnClick(index)}>
<Show when={options()[index].selected}>
<div>{each_option().title}</div>
</Show>
<Show when={!options()[index].selected}>
<div>{each_option().subtitle}</div>
</Show>
</div>
}
</Index>
</div>
)
}
render(() => <CheckboxArea options={optionsList}/>, document.getElementById("app")!);
Despite registering click events and updating through options(), the views fail to update accordingly.