diff --git a/README.md b/README.md index 415bb6e4e..6686c9d93 100644 --- a/README.md +++ b/README.md @@ -22,4 +22,4 @@ Make the `App` a class component with `pressedKey` in the `state`. - 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://YarikKedrych.github.io/react_keyboard/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index f819cbdb9..000000000 --- a/src/App.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export const App: React.FC = () => ( -
-

The last pressed key is [Enter]

-
-); diff --git a/src/ShowCurrentKey.tsx b/src/ShowCurrentKey.tsx new file mode 100644 index 000000000..220e911ac --- /dev/null +++ b/src/ShowCurrentKey.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +type State = { + pressedKey: string; +}; + +export class ShowCurrentKey extends React.Component<{}, State> { + state = { + pressedKey: '', + }; + + componentDidMount() { + document.addEventListener('keyup', this.handlePressedKey); + } + + componentWillUnmount() { + document.removeEventListener('keyup', this.handlePressedKey); + } + + handlePressedKey = (event: KeyboardEvent) => { + this.setState({ pressedKey: event.key }); + }; + + render() { + const { pressedKey } = this.state; + + return ( +
+ {pressedKey ? ( +

The last pressed key is [{pressedKey}]

+ ) : ( +

Nothing was pressed yet

+ )} +
+ ); + } +} diff --git a/src/index.tsx b/src/index.tsx index 7d27337cd..9e7ff2757 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,8 @@ import { createRoot } from 'react-dom/client'; -import { App } from './App'; - +import { ShowCurrentKey } from './ShowCurrentKey'; import './index.scss'; +import React from 'react'; -createRoot(document.getElementById('root') as HTMLElement).render(); +createRoot(document.getElementById('root') as HTMLElement).render( + , +);