import * as React from 'react' ; import { render } from 'react-dom' ; import TodoForm from './components/todo-form' ; import TodoList from './components/todo-list' ; import { TodoInterface } from './interfaces' ; import './styles/styles.css' ; const TodoListApp = ( ) => { const [ todos , setTodos ] = React . useState < TodoInterface [ ] > ( [ ] ) ; function handleTodoCreate ( todo ) { const newTodosState = [ ... todos ] ; newTodosState . push ( todo ) ; setTodos ( newTodosState ) ; } function handleTodoUpdate ( event , id ) { const newTodosState = [ ... todos ] ; newTodosState . find ( ( todo ) => todo . id === id ) ! . text = event . target . value ; setTodos ( newTodosState ) ; } function handleTodoRemove ( id ) { const newTodosState = todos . filter ( ( todo ) => todo . id !== id ) ; setTodos ( newTodosState ) ; } function handleTodoComplete ( id ) { const newTodosState = [ ... todos ] ; newTodosState . find ( ( todo ) => todo . id === id ) ! . isCompleted = ! newTodosState . find ( ( todo ) => todo . id === id ) ! . isCompleted ; setTodos ( newTodosState ) ; } function handleTodoBlur ( event ) { if ( event . target . value . length === 0 ) { event . target . classList . add ( 'todo-input-error' ) ; } else { event . target . classList . remove ( 'todo-input-error' ) ; } } return ( < div className = "todo-list-app" > < TodoForm todos = { todos } handleTodoCreate = { handleTodoCreate } / > < TodoList todos = { todos } handleTodoUpdate = { handleTodoUpdate } handleTodoRemove = { handleTodoRemove } handleTodoComplete = { handleTodoComplete } handleTodoBlur = { handleTodoBlur } / > < /div>); } ; const rootElement = document . getElementById ( 'root' ) ; render ( < TodoListApp />, rootElement);