types update

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)}
           />
         ))}
       </div>

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 (
     <div
       className={clsx('p-4 flex items-center', {
@@ -17,7 +24,7 @@ export const TodoItem = ({ status, label, onChecked }) => {
         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')}
       />
     </div>
   );