import * as React from "react" ; import { todoListFilterState } from "../atoms" ; import { useRecoilState } from "recoil" ; import { TodoFilter } from "../types" ; export const TodoListFilters = ( ) => { const [ filter , setFilter ] = useRecoilState ( todoListFilterState ) ; const updateFilter = ( event ) => { const { target : { value } , } = event ; setFilter ( value as TodoFilter ) ; } ; return ( < > Filter : < select value = { filter } onChange = { updateFilter } > < option value = "Show All" > All < /option> < option value = "Show Completed" > Completed < /option> < option value = "Show Uncompleted" > Uncompleted < /option> < /select> < />); } ;