Functional App component using "use"

App.jsx

import { use } from '@stated-library/react';

import { appState$ } from './state';

const App = () => {
  
  const {addTodo, allTodos, visibleTodos} = use(appState$);
  
  return (
    <>
      <button onClick={() => addTodo("New todo")}>
        Add Todo
      </button>
      <div>All todos: {allTodos.map(todo => <div>{todo.title}</div>)}</div>
      <div>Visible todos: {visibleTodos.map(todo => <div>{todo.title}</div>)}</div>
    </>
  );
}