yogeshtakeo commented 1 year ago

React useState and Props Exercise

Objective

The objective of this exercise is to assess the participants' understanding and proficiency in using the useState hook and working with component props in a React application.

Component Setup

Create a new React component named Counter.

useState Hook

Define a functional component named Counter that takes a single prop named count.
Inside the Counter component, use the useState hook to create a state variable named currentCount and initialize it with the value of the count prop.

Displaying the Count

Display the current count value in the component's JSX.

Increment and Decrement Functionality

Add a button labeled "Increment" that, when clicked, increases the count by 1.
Add a button labeled "Decrement" that, when clicked, decreases the count by 1.

Updating the Display

Update the component's JSX to display the updated count value whenever it changes due to an increment or decrement.

Styling

Customize the styling of the component and buttons using CSS or a CSS-in-JS solution of your choice.

Testing

Test the Counter component by rendering it multiple times with different initial count values and verifying that the increment and decrement buttons work correctly.

Additional Requirements

The count prop passed to the Counter component should be a number.
The Counter component should not allow the count to go below zero.

Git and GitHub

Create a new GitHub repository for this exercise.
Push your project to the GitHub repository.
Take screenshots of the code in your Counter.js file and the rendered component.
Go to the GitHub repository's issues section and create a new issue.
In the issue's comment section, upload the screenshots of your code and the rendered component.
Include the GitHub repository URL in the comment as well.

Submission

Share the screenshots of your code and the rendered component in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or CSS features or syntax to enhance your solution. Provide comments where necessary to explain your code.