React Challenge #8: Incrementing and Decrementing the State Variable on Button clicked in React JS

Welcome, to ReactjJS Challenge in Hindi. We will see how to Incrementing and Decrementing the State Variable on Button clicked in React JS in Hindi in 2020.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: • ES6 Tutorial #5: Array...
➡️ Object Destructuring in ES6 in JavaScript in Hindi: • ES6 Tutorial #7: Objec...
➡️ React DevTools & Source Code Link: www.thapatechn...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechn...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechn...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter KZbin Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...

[@ThapaTechnical]

Guys, ye video kaisa laga jarror batana ☺️

[@tasneemkhan1405]

Ek no. sirji☝️ hamesha ki tarah super ke upar 🤞💖 Keep sharing awesome react lecture 🙏😍 Sir I missed some videos😥 I'll cover that soon and koi doubt Raha to please answer karna 🤗

[@AsifAli14280]

Present sir😃

[@ruchiagarwal4943]

bhai kuch samajh nahi aa raha

[@anishsingh293]

sir aapka video dekh dekh ke job lg gya

[@kamleshpawar9483]

as usual, awesome

[@sohelansari5403]

bhai maza aa gaya aaj bana liya ye mini project without any external help mujhe mere ek friend ne aapka channel recommend kiya tha aur sach me ye bohot acha suggestion tha thank you very much keep it up bro good work well done

[@taruntanmay9431]

I've started watching your videos at 2x-3x, using the Video Speed Controller plugin and reached to 45 video within a week. Since I also code everything simultaneously while learning from You so it took me a week. You teach the concepts so good, that when I paused the video to complete the challenge myself, I did everything expected. Amazing tutorials, and very easy to learn and remember all the concepts.

[@tanmaythaker2905]

Same bro! I reached 47th video of the playlist in just 4. days

[@taruntanmay9431]

@@tanmaythaker2905 great ! I'm either on 60 or 70 now

[@hammadshoaib7758]

bro what are you doing now?

[@M0hiit]

@@hammadshoaib7758 lol

[@zehrxsyed]

iske baad ache se samjh aaya kaafi kuch sir thank you.

[@shivanigoswami7517]

Best channel on KZbin pls make a complete website project on react and how can deploy it

[@RITIKJAINBCE]

u can easily deploy it on github

[@PrakashYadav-ur8or]

Sir, Haar manane walo ki kabhi jeet nhi hoti btw you are doing wonderful job

[@SauravVerma7]

Thank you ,brother! This was smooth!

[@ShaibiLife]

*Here you go for css* *{ padding: 0; margin: 0; box-sizing: border-box; background-color: aquamarine; } .main_div{ width: 100%; height: 100vh; background-color: goldenrod; display: flex; justify-content: center; align-items: center; text-align: center; } .center_div{ width: 25%; height: 60vh; background-color: aliceblue; box-shadow: 5px 5px 5px -5px black; border-radius: 15px; display: flex; flex-direction: flex; justify-content: center; align-items: center; } h1{ color: white; background-color: rgb(59, 58, 58); padding: 6px 0 2px 0 ; margin-bottom: 10px; width: 100%; box-shadow: 5px 5px 5px -5px black; } button{ min-height: 40px; border-radius: 5%; background-color: transparent; background-color: rgb(73, 70, 70); color: white; padding: 0 15px; margin-top: 30px; box-shadow: 5px 5px 5px -5px black; } button:hover{ background-color: rgb(83, 83, 228); } .btn_div{ width: 100%; display: flex; justify-content: space-around; align-items: center; }

[@Kidsimproving-jv7zf]

thank you , you are solve my problems . i impressed your style of teaching.

[@bhagabatiprasad2612]

Thank you bro. I did it myself . Also got an ide aof Shopping cart system. You're really Amazing...

[@GG_Gaming_102]

Bro me toh fan hogya aapka what a explanation. 😙🙂☺

[@letsshowdesigns]

Kindly, make small website like one page in react and most important don't forget to cover redux which is very important hope you consider my request thank you.

[@nitink7426]

Sir, everything is awesome but one thing you missed. at 2:24 Its not "Har manane walo ki kabhi haar nai hoti". Is it "Kosis karne walon ki kabhi haar nai hoti"

[@Shoaib_Khan9272]

yeah I was about to comment that

[@rajat-s-kale1771]

Your teaching is awesome

[@DEEPANSHU_NAG]

*_Good UI_* 👍🏻 *_Nice thumbnail_* ✌🏻 *_Awesome video_* 👏🏻💯

[@ThapaTechnical]

Thank you so much ☺️

[@abcool0801]

Amazing series bro bs ab state management b le aao jaldi se. how to use redux and other frameworks for react like gatsby ya nextjs

[@anmolsingh4969]

I complete it without vedio 😃😃😃👍👍👍

[@ashishsingla4697]

2:21 what an amazing quote ..

[@hiralalumeshkumhar1054]

😂😂I am laughing at that quote

[@sharyarmustafa9880]

import React, { useState } from 'react' function ButtonChange() { const [ count , setcount]=useState(0) if(count == -1){ setcount(0) } return ( {count} {setcount(count + 1)}} >+ {setcount(count - 1)}} >- )} export default ButtonChange

[@sagar-vispute]

Bhai puri series functional component base hi he kya?

[@gabbarpatil3222]

challenge accepted .... code with no design import React, { useState } from 'react' const App = () => { const [num, changeNum] = useState(0); const incrementNum = () => { changeNum(num+1) } const decrementNum = () => { if (num-1 < 0){ alert(`you can't decrease than 0`) }else{ changeNum(num-1) } } return ( {num} Increment Decrement ) } export default App

[@vrajpatel0218]

sir ho gaya first time me

[@mastikipathshala836]

I Done this Challenge 😀

[@okeyshourovroy2769]

Very useful video brother

[@soniyachaniya1674]

Thank u so much 😊

[@cb350_]

This was really helpful today :)

[@sanketkpatil1683]

Thank you...... Really helpful

[@shivamchouhan5077]

Thank you so much 😀😀

[@RITIKJAINBCE]

can simplify it more by passing button id to only one func. and inc or dec by checking the id

[@sheikhs4896]

actually main is topic par video khoj raha tha on google i can't find it but actually you do so

[@santiagopizzi2374]

Capo total, el unico que me pudo explicar lo que queria, saludos desde Argentina!

[@piyush_dolar]

Why we do use cosnt everytime *const TodoList = () => {* *// Code goes here* *}* Why we don't use just let *let TodoList = () => {* *// Code goes here* *}* instead? just wondering.

[@sumanjha7590]

because const means constant value it can't be change whereas in let we can update the value in need.

[@sailendrachettri8521]

This is really fun :)

[@EWorldHub]

Superb

[@dibyenduroy3149]

@thapa sir which project will be better to do in React/react so that i can get a job in software companies on experience basis.

[@mozibulrahman188]

Nce video bro..God bless u

[@MS-bi2ls]

really helpful

[@karankhullar7934]

I have done it like this, can anyone tell is it correct way to do ? import { useState } from "react"; function App() { let [number, setNumber] = useState("0"); function setValue(event) { let name = event.target.name; if (name === "dec") { if (number > 0) { setNumber(--number); } else { alert("Number can't be less than 0."); } } else { setNumber(++number); } } return ( {number} Increment Decrement ); } export default App;

[@vaibhavsarode2426]

i have completed this challenge

[@rajbannasa7662]

thank you so much sir

[@manishjain9703]

I used this this is working but can't show alert setNum((preValue)=>{ return preValue === 0 ? 0 : num-1 })

[@thecoderraj3777]

Thanks sir ☺️

[@Rohitvermawebdesigner]

Hi Sir this is working fine only for single box but how can do this if we have multiple box with decrement and increment buttons?

[@latikajain9309]

hay can you please start the database thngs with react

[@himanshudixit977]

9:31 actual logic

[@harisbashir2719]

Please start flutter and dart cross platform mobile application series. Humble request from Pakistan♥️

[@gauravsahu4917]

THanks boss

[@deepakborade4123]

Very good

[@mananbari4725]

@Thapa_Technical Can you please make a video for Global state Context and Hooks plz let me now if you will or not

[@hruday-ranjan]

SUPPER BrO....👌

[@aditya2000]

Nice challenge buddy

[@dibyenduroy3149]

@Thapa sir aapke paas full course hoga "react + redux" ka ?? hy to please link bhej dijiye ,paid couse honese bhi chalega

[@sumanjha7590]

what if we use (!num == 0) to decrement in If statement

[@anmolsingh4969]

IT depends on u

[@vaghelapooja1690]

Isame ham spread operator ka use kar sakte hai kya ? Agar haa to kese?

[@zakyasharmeen5815]

import React, { useState } from "react"; export default function Inc() { const [num, setNum] = useState(0); const increment = () => { setNum(num + 1); }; const decrement = () => { setNum(num - 1); }; if (num < 0) { return alert("number less than 0 is canot be decrease"); } return ( {num} + ▶ - ◀ ); } i did like this by own same output

[@akashgupta3322]

Mera sabse bardha problem ye ho rha he,ki me logick kese lgau mtlb thinking power ko kese boost karu

[@rkcreation6560]

Done in first try

[@kmkrishna762]

thanks

[@niyomahor6252]

instead of (num + 1) , why can not we write (num++) . When I am writing (num++) it is not working.

[@rajusinghrajput4442]

Helo. Sir Mene apse puncha tha ki hm login with token form kese create kar sakte he par sir apne koi answer nhi diya sir muje is form ki bhut jarurat thi

[@sufisufyan6489]

zabardast

[@NisarAhmad-lz8ur]

kindly redux py complete videos banado

[@suyogtiwari3134]

Hello dai , are you from Nepal?

[@ThapaTechnical]

Yes

[@rkgrap]

Nepal? Please tell your government to not mess with India. We helped you in your tough time, didn't expect this.

[@anishkumar6508]

@@rkgrap Bhai chor do uske channel ko immediately aa gaye Nepal s ho this and that such a simple Guy teaching web concepts in Hindi.What he has to do with politics of communists in Nepal. Let him teach and dont feed his comments with negativity.

[@ranjitdesai3926]

@@rkgrap Look the fantastic way in which he teaches....don't get into politics. He is jus fantastic. People have knowledge but having skills to impart that knowledge is a great skill and this chap has an extraordinary skill of being a good teacher. nobody gives damn about from where he is.

[@khatariinsaan5284]

*if you facing the problem that Alert is Showing twice then* *Remove the StrictMode in Index.js*

[@rajusinghrajput4442]

Sir ap har video bhut achi banate he par sir doubt clear nhi karte he to hm user ka apka chenal subscribe karne ka ya mat lab ap ko comments ka answer to dena chahiye

[@amithshetty2289]

when return () and return {} is used, sometime they use () and sometime {}.

[@harpinderO]

if, else se better ternary operator : const Den = () => { (val === 0) ? setVal(0,alert('sorry, you value is rached')) : setVal(val - 1) }

[@cciecloud]

Bhai javascript mai increment and decrement nhi banaya kya so nay

[@arpitjainaj007]

no need of setNum(0) as you already did in while declaring state as default value

[@hiralalumeshkumhar1054]

Haar maane waalo ki kabhi haar nahi hoti 😂😂,I guess idhar Change hona chaiye

[@abhipanchal938]

Hlww ...Muje Is Video ka Drescription chaiye With code

[@aamirsaleem5294]

osm

[@moviessplex]

woooooooo

[@rahulkashyap-jp1vt]

bhaiya galat ho gya " HAR { NA } MANNE WALO KI KABHI HAR NAI HOTI " and thanks for your support luv u

[@aniketyadav6009]

👍👍✌️

[@hannanafridi1649]

💗

[@amancuber5235]

5:30

[@raghavendrakesari337]

Please apne videos paid nh kr dena.Free me itne achhe learning kahi nh hai

[@syedsaad317]

hello everyone i used the following code and it wroks well... is this correct?? else { alert("Minimum number reached"); event.preventDefault(); } gives the same output @thapa_technical??

[@DemonHeadYT]

Done :) import "./App.css"; import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); const incre = () => { setCount((count) => count + 1); }; const decre = () => { if (count === 0) { alert("Number can't be Negative"); return; } setCount((count) => count - 1); }; return ( {count} Increment Decrement ); } export default App;