diff --git a/src/App.tsx b/src/App.tsx index f819cbdb9..401f32697 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,39 @@ import React from 'react'; -export const App: React.FC = () => ( -
-

The last pressed key is [Enter]

-
-); +type State = { + pressedKey: string; +}; + +export class App extends React.Component { + state: State = { + pressedKey: '', + }; + + componentDidMount(): void { + document.addEventListener('keyup', (event: KeyboardEvent) => { + this.setState({ pressedKey: event.key }); + }); + } + + componentWillUnmount(): void { + document.removeEventListener('keyup', () => { + this.setState({ pressedKey: '' }); + }); + } + + render() { + const { pressedKey } = this.state; + + return ( +
+ {pressedKey ? ( +

+ {`The last pressed key is [${pressedKey}]`} +

+ ) : ( +

{'Nothing was pressed yet'}

+ )} +
+ ); + } +}