2. Increment and Decrease number onClick React

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:

Code at github

Now is your turn, try do it by your own.

Enjoy;)

Next tutorial React with simple api