Your browser (Unknown 0) is no longer supported. Some parts of the website may not work correctly. Please update your browser.
Create a simple like button component with React.

Build a "like button" component using React 16. The component should be the default export (use export default).

Requirements:

1. There should be a like button:

  • The content of the like button should be in the following format: "Like | 100", where 100 is the total number of likes.
  • It should have a "like-button" class.
  • Wrap the number of likes in a span with a "likes-counter" class.
  • The initial number of likes in the counter should be 100.

2. Users can add a like. By clicking the button:

  • The number of likes should increase by one.
  • Like button should have "liked" class in addition to the "like-button" class (you can use the classnames tool for that).

3. Users can undo their like by clicking again on the button:

  • The counter should decrease by one.
  • "liked" class should be removed.

Assessment/Tools:

  • Only two imports are allowed: react (v16.8.6) and classnames (v2.2.5). Both are at the top of the starting code.
  • Use the animation below as a reference for your solution.
  • Design/styling is not assessed and will not affect the score. You should focus only on implementing the requirements.
  • The "Preview" tab will display your component. You can use it for testing purposes.


Copyright 2009–2024 by Codility Limited. All Rights Reserved. Unauthorized copying, publication or disclosure prohibited.