#react useState with #typescript

usestate-with-typescript.ts

// empty initial state

const [pill, setPill] = useState<'red' | 'blue'>();

// JSX: {pill && <span>You chose {pill.toUpperCase()} pill!</span>}

// clearable state
 
 export const PillSelector: React.FunctionComponent = () => {
    const [pill, setPill] = useState<'blue' | 'red' | undefined>('blue');  // <--
    return (<div>
        <button onClick={() => setPill('red')}>Red pill</button>
        <button onClick={() => setPill('blue')}>Blue pill</button>
        // 🛑 Argument of type 'undefined' is not assignable 
        // to parameter of type 'SetStateAction<string>'.
        <button onClick={() => setPill(undefined)}>Reset</button>
        {pill && <span>You chose {pill.toUpperCase()} pill!</span>}
    </div>);
}