Solidjs - Uncaught TypeError: l is not iterable when using setState

Question

Using solidjs v 1.7.x I have a project very similar to your basic todos app. Given a list of data that looks like this:

list = 
[
    {
        "id": 1,
        "status": "complete",
        "data": {...}
    },
    {
        "id": 2,
        "status": "skipped",
        "data": {...}
    },
    {
        "id": 3,
        "status": "skipped",
        "data": {...}
    },
    {
        "id": 4,
        "status": "new",
        "data": {...}
    }
]

I'm attempting to update the status of these items in an event handler and then move completed and skipped items from a New Todo list to a Done list.

I have things setup in the app with

createStore(list)

Then in the todo component I have an event handler that calls setState much like in the example docs:

const setComplete = (e) => {
    setState(state, l => [...l, {id: props.toDo.id, data: props.toDo.data, status: 'complete'}]);
  };

This seems like it would be straightforward but I get an error

Uncaught TypeError: l is not iterable

I notice the same behavior when I wrap the list in an object.

createStore({stateList: list})

Is there something I'm missing about accessing nested objects in a solidjs store?

Answer 1

You are using setState function in a wrong way, it should be:

const setComplete = (e) => {
  setState(l => [...l, {id: props.toDo.id, data: props.toDo.data, status: 'complete'}]);
};