SolidJSS
SolidJS•2y ago•
7 replies
webstrand

Adapting a list of objects to signals

I've got an API that returns a list of objects like
[
    { name: "foo", value: 200, message: "whatever" },
    { name: "foo", value: 44, message: "" },
    { name: "baz", value: 0, message: "blah" }
]

I fetch this data using useResource and I render it out with a tree of components like
function List(props: { results: Result[] }) {
    return <For each={props.results}>{(result) => <Result result={result}/>}</For>
}

function Result(props: { result: Result }) {
    return <ul>
      <li>{props.result.name}</li>
      <li><input type="number" value={props.result.value}/></li>
      <li><input type="text" value={props.result.message}/></li>
    </ul>
}

The problem comes when I invalidate the resource and re-fetch it, all of the Result components get re-rendered from scratch, because the objects are different. And even if the objects were the "same" then they wouldn't update properly because props.result.value isn't a signal.

Does solid provide any tools for mapping data like this into signals so that my components can be reactive to it?
Was this page helpful?