import * as React from "react" ; import { useRecoilState } from "recoil" ; import { TodoItem } from "../types" ; import { todoListState } from "../atoms" ; import { replaceItemAtIndex , removeItemAtIndex } from "../utils" ; type Props = { item : TodoItem ; } ; export const TodoListItem = ( props ) => { const { item } = props ; const [ todoList , setTodoList ] = useRecoilState ( todoListState ) ; const index = todoList . findIndex ( ( listItem ) => listItem === item ) ; const editItemText = ( event ) => { const { target : { value } , } = event ; const newList = replaceItemAtIndex ( todoList , index , { ... item , text : value , } ) ; setTodoList ( newList ) ; } ; const toggleItemCompletion = ( ) => { const newList = replaceItemAtIndex ( todoList , index , { ... item , isComplete : ! item . isComplete , } ) ; setTodoList ( newList ) ; } ; const deleteItem = ( ) => { const newList = removeItemAtIndex ( todoList , index ) ; setTodoList ( newList ) ; } ; return ( < div > < input type = "text" value = { item . text } onChange = { editItemText } / > < input type = "checkbox" checked = { item . isComplete } onChange = { toggleItemCompletion } / > < button onClick = { deleteItem } > X < /button> < /div>); } ;