Copy
1import { IObservable, observe, useObserver } from 'react-observing'
2
3
4const todosStore: IObservable<IObservable<string>[]> = observe([
5  observe(''),
6]);
7
8const Input: React.FC<{ todoObservable: IObservable<string> }> = ({ todoObservable }) => {
9  const [todo, setTodo] = useObserver(todoObservable);
10  return <input value={todo} onChange={e => setTodo(e.target.value)} />
11}
12
13const TodoItem: React.FC<{ todoObservable: IObservable<string>, onRemove: () => void }> = ({ todoObservable, onRemove }) => {
14  return <li>
15    <button onClick={onRemove}>Remove</button>
16    <Input todoObservable={todoObservable} />
17  </li>
18}
19
20
21export const TodoList = () => {
22  const [todos, setTodos] = useObserver(todosStore);
23
24  return (
25    <div>
26      <h1>Todo list</h1>
27
28      <button onClick={() => setTodos(old => [...old, observe('')])}>Add item</button>
29
30      <ul>
31        {todos.map((todo, index) => (
32          <TodoItem
33            key={todo.id}
34            todoObservable={todo}
35            onRemove={() => setTodos(old => [...old.filter((_, i) => i !== index)])}
36          />
37        ))}
38      </ul>
39    </div>
40  )
41}