diff --git a/src/App.tsx b/src/App.tsx index 76e3b09..335b308 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,9 @@ import { useState } from 'react'; import { faker } from '@faker-js/faker'; import { TodoItem } from './TodoItem'; import { nanoid } from 'nanoid'; +import { ReactElement } from 'react'; +// interface elements types interface My_items{ label: string; status: string; @@ -38,10 +40,10 @@ const initialList = [ ...generateNTodo(10), ]; -function App() :{TO_BE_DEFINED}{ +function App() : ReactElement { const [todoList, setTodoList] = useState(initialList); - const updater = (id:string, newStatus:string) => { + const updater = (id:string, newStatus:string) : void => { setTodoList((oldList) => oldList.map((it) => { if (it.id !== id) { @@ -63,7 +65,7 @@ function App() :{TO_BE_DEFINED}{ key={item.id} label={item.label} status={item.status} - onChecked={(newState: string) => updater(item.id, newState)} + onChecked={(newState: string): void => updater(item.id, newState)} /> ))} diff --git a/src/TodoItem.tsx b/src/TodoItem.tsx index d52e923..1f6facf 100644 --- a/src/TodoItem.tsx +++ b/src/TodoItem.tsx @@ -1,6 +1,13 @@ import clsx from 'clsx'; +import { ReactElement } from 'react'; -export const TodoItem = ({ status, label, onChecked }) => { +interface My_items { + status: string; + label : string; + onChecked: (status: string) => void; +} + +export const TodoItem = ({ status, label, onChecked } : My_items) : ReactElement => { return (
{ disabled={status === 'archived'} type="checkbox" className="rounded text-pink-500 ml-8 cursor-pointer disabled:cursor-not-allowed disabled:bg-black disabled:hover:bg-black" - onChange={() => onChecked(status === 'open' ? 'done' : 'open')} + onChange={() : void => onChecked(status === 'open' ? 'done' : 'open')} />
);