How to re-render react functional component when a promise is resolved

Question

I'm trying to figure out a simple todo app in react using typescript. the newly created todo doesn't reflect on the list. am trying to figure out what went wrong here

my react component

const service = new TodoService();

function App() {

  useEffect(()=>{
    service.getAllTodos();
  }); 

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <TodoContainer items={service.allTodos} onNewTodoCreated={description => {service.createTodo(description)}} />
      </header>
    </div>
  );
}

export default App;

the TodoContainer takes list of items and newtodoCreated as props

and my service

export default class TodoService {
    public allTodos: TodoItem[] = [
        {dateCreated: new Date(), id: v4(), description: "Fetch Milk" },
        {dateCreated: new Date(), id: v4(), description: "Buy iPhone" },
        {dateCreated: new Date(), id: v4(), description: "Impress at DWIT" },
    ]
    
    getAllTodos(): Promise<TodoItem[]> {
        return new Promise<TodoItem[]>((resolve) => {
             setTimeout(() => resolve(this.allTodos), 3000);
        });
    }

    createTodo(description: string): Promise<TodoItem> {

        return new Promise<TodoItem>((resolve) => {
            const id = uuidv4();
            const dateCreated = new Date();
            setTimeout(() => {
                const saved = {description, id, dateCreated};
                this.allTodos.push(saved);
                resolve(saved);
            }, 2000);
        })
    }
}

Answer 1

You need to use useState hook here, something like so

 function App() { const [todos, setTodos] = useState([]); useEffect(()=>{ service.getAllTodos().then(todos => setTodos(todos)); }, []); const handleCreate = (description) => service.createTodo(description).then(todo => { /* @TODO update state */ }) } return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <TodoContainer items={todos} onNewTodoCreated={handleCreate} /> </header> </div> ); } export default App;