JavaScript: Don't touch me

Last update: 24 Mar 23:20
0
Students

Buttons.jsx

Implement the <Buttons/> component and export it as default. It should render the buttons with the counter value.

The component should have the following logic:

  • The current counter value of each button is a string inside the button tag.
  • Clicking on the button should increase the counter value by one, without affecting other counters
  • The component must take the count prop that specifies the number of buttons (3 by default)
  • To style the buttons, use the bootstrap library (you can import it in your component)
  • The last clicked button changes color (via class change). The classes are given in the below examples

Examples

Buttons with a zero counter value:

<button class="btn btn-primary m-1" type="button">0</button>
<button class="btn btn-primary m-1" type="button">0</button>
<button class="btn btn-primary m-1" type="button">0</button>

The clicked buttons. The last one was the second one (btn-primary => btn-success):

<button class="btn btn-primary m-1" type="button">3</button>
<button class="btn btn-success m-1" type="button">1</button>
<button class="btn btn-primary m-1" type="button">2</button>

Tips

  • Solve this task using functional components and hooks
  • Use the useImmer hook to manage a state
  • The Rise of Immer in React
  • React docs on hooks

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests