First off, many thanks for your work on both State and List!
For the issue: I have a list of items a user can add to, shown below as a to-do list. I would like to use a LegendState store to access and persist them. This works with FlatList, user hits the button, a new entry appears. LegendList displays the initial entry, but doesn't update when the button is hit. However, if I switch to useState instead of observable(), LegendList (and Flatlist) work.
Versions:
├── @legendapp/list@3.3.2
├── @legendapp/state@3.0.0-beta.47
Reproducer
type TodoReproEntry = {"text": string, "id": string}
interface TodoListRepro { todos: TodoReproEntry[]; addTodo: () => void; }
// Create a global observable for the Todos
const todoRepro = observable<TodoListRepro>({
todos: [
{"text": "This is an example of a to-do", "id": "todo0"},
],
addTodo: () => {
const todo: TodoReproEntry = { text: "success", id: "todo"+todoRepro.todos.length};
todoRepro.todos.push(todo);
},
});
const TodoList = observer(()=>{
const listItems = useValue(todoRepro.todos.get());
return (
<>
<FlatList
keyExtractor = {item => item.id}
data={listItems}
renderItem={({ item }) => <Text>{item.text }</Text>}
/>
<Pressable onPress={(_)=>{todoRepro.addTodo()}}>
<Text>add entry</Text>
</Pressable>
</>
);
});
export default TodoList
Behavior:
- Above setup, using Flatlist: click "add entry", the word "success" is appended as many times as you click the button
- Above setup, replace "Flatlist" with "LegendList": click "add entry", the word success does NOT appear
Check to make sure I'm not using LegendList wrong (at least in an obvious way):
Replace listItems with the below, update the onPress to use addNew()
const [listItems, setListItems] = useState( [ {"text": "This is an example of a to-do", "id": "todo0"}]);
const addNew = ()=>{ setListItems([...listItems, { text: "success", id: "todo"+listItems.length}]); }
Behavior:
- Using Flatlist: Works
- Using LegendList: Works
Very open to this being PEBKAC, though if so I'd ask a note be added to the Legendlist docs (ex: here) about gotchas in using state if they're not quite 1:1. Thanks for taking a look!
First off, many thanks for your work on both State and List!
For the issue: I have a list of items a user can add to, shown below as a to-do list. I would like to use a LegendState store to access and persist them. This works with FlatList, user hits the button, a new entry appears. LegendList displays the initial entry, but doesn't update when the button is hit. However, if I switch to useState instead of observable(), LegendList (and Flatlist) work.
Versions:
├── @legendapp/list@3.3.2
├── @legendapp/state@3.0.0-beta.47
Reproducer
Behavior:
Check to make sure I'm not using LegendList wrong (at least in an obvious way):
Replace listItems with the below, update the onPress to use addNew()
Behavior:
Very open to this being PEBKAC, though if so I'd ask a note be added to the Legendlist docs (ex: here) about gotchas in using state if they're not quite 1:1. Thanks for taking a look!