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

The last pressed key is [Enter]

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

+ The last pressed key is [{this.state.key}] +

+ ) : ( +

Nothing was pressed yet

+ )} +
+ ); + } +}