import * as React from "react" ; import { useState } from "react" ; import { useSetRecoilState } from "recoil" ; import { todoListState } from "../atoms" ; import { getId } from "../utils" ; export const TodoItemCreator = ( ) => { const [ inputValue , setInputValue ] = useState ( "" ) ; const setTodoList = useSetRecoilState ( todoListState ) ; const addItem = ( ) => { setTodoList ( ( oldTodoList ) => [ ... oldTodoList , { id : getId ( ) , text : inputValue , isComplete : false , } , ] ) ; setInputValue ( "" ) ; } ; const onChange = ( event ) => { const { target : { value } , } = event ; setInputValue ( value ) ; } ; return ( < div > < input type = "text" value = { inputValue } onChange = { onChange } / > < button onClick = { addItem } > Add < /button> < /div>); } ;