From f00598ccb66a0722f3daebe454ea3ca545ac555d Mon Sep 17 00:00:00 2001 From: Ihor Oksentiuk Date: Thu, 20 Jul 2023 15:29:50 +0300 Subject: [PATCH 1/2] Finished task --- src/App.tsx | 34 +++++++++++++++++++++++++++++----- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f819cbdb9..436cef897 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,31 @@ import React from 'react'; -export const App: React.FC = () => ( -
-

The last pressed key is [Enter]

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

+ { + !this.state.pressedKey + ? 'Nothing was pressed yet' + : `The last pressed key is [${this.state.pressedKey}]` + } +

+
+ ); + } +} From b653a27b3591d269e78f1381be18c3de6d1b75ea Mon Sep 17 00:00:00 2001 From: Ihor Oksentiuk Date: Fri, 21 Jul 2023 12:49:11 +0300 Subject: [PATCH 2/2] Created handleKeyPress callback --- src/App.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 436cef897..74db5a6ff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,13 +6,15 @@ export class App extends React.PureComponent { }; componentDidMount(): void { - document.addEventListener('keyup', (event: KeyboardEvent) => { - this.setState({ pressedKey: event.key }); - }); + document.addEventListener('keyup', this.handleKeyPress); } componentWillUnmount(): void { - document.removeEventListener('keyup', this.setState); + document.removeEventListener('keyup', this.handleKeyPress); + } + + handleKeyPress(event: KeyboardEvent): void { + this.setState({ pressedKey: event.key }); } render() {