2. Increment and Decrease number onClick React
1 min readMar 22, 2017
This is the second part of my React tutorials. See Intro to react.js here
Let’s get started with simple example how to increment and decease number on button click and show number depending on button click too.
First what we need to do it:
1. Set initial state
As we can see our state is a object with two properties clicks and show
- clicks to store how many times we click on button
- show to set value to true or false depending if we want see number or not
2. Write functions IncrementItem, DecreaseItem and ToggleClick
- IncrementItem() we change our state clicks by adding 1.
- DecreaseItem() we change our state clicks by removing 1.
- ToggleClick() we flip our state show for opposite every time we click.
3.Passing methods to buttons
If we have a class component with need render method where we return who we want show in browser
- create three button where we are passing onClick our methods
- last thing inline if statement where we determined depending of our state show if we want show number or not
And we are done ;)
This how our components should look like now:
Now is your turn, try do it by your own.
Enjoy;)
Next tutorial React with simple api