JavaScript: Don't touch me

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