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.