App Component
In this blog I will explain about how i completed assignment of counter App.
First I created counter App component inside component folder and import counter App in App component.
In App component. I used useState hook for that we need to import useState first from 'react' and declared initial state as 'light theme'.const[theme,setTheme]=useState("light");
I used two icons inside ternary operator and for each icon used function whenever user click on icon state get updated according to that changes will display.
To style App component I used class selector.Declared class for each button which will change according to the state.
className={${theme}-backgroundColor} and wrote css for both the themes and that class will apply css to component according to state.
Passed 'theme' to counter App component as props because whenever state changes we need make changes according to theme in counter App.
Counter Component
In counter App component. First I import style file. I used one input for getting number from user and three buttons to update counter. Here ,I used useState to store number or update number entered by user.
const[num , setNum]=useState("")
I declare initial state as double quote because if user try to increase to decrease number without entering any number in input it will give error to solve this I used ternary operator
whenever value of num become "" direct pass 1 or -1 else increment or decrement number by one.
First button is for decrease number for that I used onClick event passed one function it will decrease number by one.
Second button is for reset counter for that also I used onClick event passed one function that will reset the counter.
Third button is for increase number for that also used onClick event and passed one function that will increase number by one.
To style counter app component. I used class selector for each button gave one class which will change according to state and wrote css for each class.
Top comments (0)