Problem assigning state of useState to literal types (HTMLSelectElement)

Question

I'm building a todo app with typescript and react hooks, and I try to add a filter feature to show tasks that are "all task", "done" or "to do". I tried to use literal types here but it gives me error.

/components/Sort.tsx:

import * as React from 'react';

interface SortProps {
    SelectByDone: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    SelectSortMethod: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
}

const Sort: React.FunctionComponent<SortProps> = ({SelectByDone, SelectSortMethod}) => {
    return (
            <>
            <label >Sort by:</label>
            **<select   onChange={SelectByDone}>
                <option value="All Task">All Task</option>
                <option value="Done">Done</option>
                <option value="To Do">To Do</option>
            </select>**
            <select onChange={SelectSortMethod}>
                <option value="Date Added">Date Added</option>
                <option value="Due">Due</option>
                <option value="Caption">Caption</option>
            </select>
            </>
        );
};

export default Sort;

I think option value should only give "All Task"/"Done"/"To Do"

This then will be rendered in my Topbar.tsx:

/components/Topbar.tsx:

import * as React from 'react';
import Sort from './Sort';
import SearchBar from './SearchBar';

interface TopBarProps {
    SelectByDone: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    SelectSortMethod: (event: React.ChangeEvent<HTMLSelectElement>)=> void;
    onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const TopBar: React.FunctionComponent<TopBarProps> = ({SelectByDone,SelectSortMethod,onSearchChange}) => {
    return (
            <>
                <Sort SelectByDone={SelectByDone} SelectSortMethod={SelectSortMethod} />
                <SearchBar onSearchChange={onSearchChange} />
            </>
        );
};

export default TopBar;

Then this is my index.tsx:

import React, {useState} from "react";
import ReactDOM from "react-dom";
import TopBar from '../components/TopBar';
import TodosTable from '../components/TodosTable';

type DoneState = 'All Task' | 'Done' | 'To Do';

//...

const App = () => { 

    const [doneState, setDoneState] = useState<DoneState>('All Task')

    const [searchText, setSearchText] = useState<string>('')

    const selectByDone = (option: React.FormEvent<HTMLSelectElement>) => {
        setDoneState(option.currentTarget.value);
    }
    // 'option.currentTarget.value' is underlined and gives error: 
    // Argument of type 'string' is not assignable to parameter of type 'SetStateAction<DoneState>'.
    // (property) HTMLSelectElement.value: string
    // Sets or retrieves the value which is returned to the server when the form control is submitted.

    const onSearchChange = (event: React.FormEvent<HTMLInputElement>) => {
        setSearchText(event.currentTarget.value);
    }
    //This works however

    //...

    return (
          <>
              <TopBar SelectByDone={selectByDone} SelectSortMethod={selectSortMethod} onSearchChange={onSearchChange} />
              <TodosTable SelectByDoneState={doneState} SelectSortMethodState={sortMethodState} SearchText={searchText} TodosArray={todosArray} />
              {//<AddTodoModal/>
              }
          </>
      );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

How to properly assign it to my literal type? Should I use enum? What resource should I check out for this (typescript-react github page)?

Thank you very much

Edit: Thanks for the typo fixing, but there's still one error there

Answer 1

You should type cast like this.

const selectByDone = (option: React.FormEvent<HTMLSelectElement>) => {
    setDoneState(option.currentTarget.value as DoneState);
}

option.currentTarget.value is a string type and cannot be assigned to DoneState.