diff --git a/README.md b/README.md index 415bb6e4e..7f09109ad 100644 --- a/README.md +++ b/README.md @@ -9,17 +9,18 @@ Make the `App` a class component with `pressedKey` in the `state`. - before any key was pressed show the `Nothing was pressed yet` message; - when a key is pressed show a `The last pressed key is [key]` message; - use `componentDidMount` to add `keyup` handler: - ```ts - // DON'T import KeyboardEvent from React, because it is a regular event - document.addEventListener('keyup', (event: KeyboardEvent) => { - console.log(event.key); - }); - ``` + ```ts + // DON'T import KeyboardEvent from React, because it is a regular event + document.addEventListener('keyup', (event: KeyboardEvent) => { + console.log(event.key); + }); + ``` - use `removeEventListener` to remove a global handler in `componentWillUnmount`. ## Instructions + - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_keyboard/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://igor-romasiuk.github.io/react_keyboard/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index f819cbdb9..02f4be746 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,37 @@ import React from 'react'; -export const App: React.FC = () => ( -
-

The last pressed key is [Enter]

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

The last pressed key is [{pressedKey}]

+ ) : ( +

Nothing was pressed yet

+ )} +
+ ); + } +}