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

The last pressed key is [Enter]

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

+ {key + ? `The last pressed key is [${key}]` + : 'Nothing was pressed yet'} +

+
+ ); + } +}