diff --git a/README.md b/README.md index f7a6277cf..024130358 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://A1eeex.github.io/react_keyboard/) and add it to the PR description. diff --git a/src/App.tsx b/src/App.tsx index f819cbdb9..33c4e71da 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,8 @@ import React from 'react'; +import Message from './components/Message'; export const App: React.FC = () => (
-

The last pressed key is [Enter]

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

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

+ ); + } +} + +export default Message;