React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS in Hindi #55

Welcome, React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS in Hindi.
Axios is a library that helps us make HTTP Requests to external resources
In our React applications, we often need to retrieve data from external APIs so it can be displayed in our web pages.
Axios is designed to handle HTTP requests and responses. Axios deals with responses using Promises, so it's streamlined and easy to use in our code. Axios uses methods like get() and post() that perform HTTP GET and POST requests for retrieving or creating resources.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ 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]

I hope you like the video :) ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ I

[@ajayshirote7619]

Your every video teaches lot of things and also entertain us thapa sir

[@shivampali9033]

Vinod bhai Custom PC pr video banao ek

[@denisshingala]

Yes, ek custome pc par video banao "npm start" Fast work kaise karta hai?

[@MaxProgramming]

One of my friends asked me that he wants to learn Web development in Hindi. You are one of the best and I have shared your channel to him!

[@ThapaTechnical]

Thank you so much ☺️

[@AvinashKumar-jf9mx]

Or koi channel h?

[@MaxProgramming]

@@AvinashKumar-jf9mx Bohot saare channels hain. But English is very important in the career of development. So we can start with Hindi, but we have to learn to speak and understand good English as a developer

[@cthulhulalala7182]

@@MaxProgramming Although ,its good to learn english but I don't think english is that necessary to do code just like maths.

[@MaxProgramming]

@@cthulhulalala7182 Yeah. English is good to learn but not necessary. But as the world uses English a lot, we should at least chat in English which makes our English better without a lot of hard work.

[@yogeshvashist3980]

Awesome, please make a video on CRUD operations through API, actually I am a .Net programmer and want to learn React. Your videos are very helpful and I am leaning it from your videos.

[@noobCoder26]

Had a great fun in building this project ....😁😁Thanks Bhaiyaa

[@asmereg]

You are the best, Bhai 🔥 TYSM! Bohot dinon se I was trying to learn how to use info from an API. Finally understood everything.

[@NeerajSingh-ru1cf]

setMoves(res.data.moves[0].move.name);

[@RITIKJAINBCE]

no it is giving error

[@NeerajSingh-ru1cf]

@@RITIKJAINBCE check your code again

[@mathswithsirnoushad6261]

yes, it's working

[@mohitsaud2071]

correct ✔✔✔✔✔

[@biplabpaul3822]

@@RITIKJAINBCE Because there is actually no JSON data in the pokemon API for 0 index..try with any other index number it will work with the same code

[@ayushdedhia25]

Yes sir, please make a video on custom pc build 🥰

[@simranbanwait]

number 1 card number pe bulbasaur hi hota tha , this is so nostalgic

[@KuldeepSingh-pl7rv]

I still don't get it every time on page rending useEffect run but without use effect i also get same thing with normal fetch or may another call back function

[@biswajeetpadhi5713]

Yes sir make video on costume pc build

[@syedahasan_gillani3878]

Mujy ya Error aa raha ha Failed to load resource: the server responded with a status of 404 ()

[@listology-mostamazingtop1041]

Sir your video are very helpful for me you're video are great

[@ritiksahu5310]

Bhaya you doing great work keep it up #IndianGuyOnYT

[@ijazDeveloper786]

sir jesy hum js me class ko toggle karty thy same wesy React me hum kese cls add i mean toggle kar skty ha

[@10yearsago84]

If we don't have set an initial value for num in useState hook, it will call the pokemon API without any num value and it returns 404 error to me. Anyone else faced this same issue ??

[@Shadab_Qazi]

yes I am having same problem.

[@amarchand1504]

res.data.moves[0].move.name sir aesy name ham get kar sakten hen...

[@techkershubb]

Thapa bhai very nicely you did explanations Thanks keep going

[@aanchalsonawane7749]

Great Sir

[@demoforall4305]

@Thapa Technical Sir Series me 104 videos the to aaj morning me 54 kese ho gaye ??

[@manurajput8421]

Sir Your Teaching Way is best And You try to understand easy way for any topics So Hello Sir I am also a Programmer in CS Branch I have need to guide for you and please help me FOR Making Car Parking Website with Database and full Web development Please Help me and guide me Sir

[@manurajput8421]

Please sir Guide me n Help me

[@manurajput8421]

Please make this own Video car Parking and booking also Please me

[@nicetomeetugaming7024]

You should try yourself bro.

[@mohsinbohra1174]

Very Good Video. Can you make video on one more challenge on covid api with the help of React Axios. @Vinod ....With The help of Map function we can define name within moves..

[@shaheensiddiqui1952]

yes sit it was really owsome the good thing is that we useed useEffect hook here sir due to you it become to much easy for us to learn react buttrlyyyyyyyyyyy bohot shukriya

[@nandkishor838]

Hi sir, I started reactjs by following your videos, and I stocked here, while I am making an API request by using axios my API is called multiple time as I uses const response variable to assign every value from response. what I need is , want to hold this response in a variable that I can fetch all the data from that variable without making multiple API call. please response ASAP

[@manishkhanna4054]

and boom

[@ashwinwaikar9015]

ye ek pikachu hai par wo ek array hai.... lol ...btw nice video

[@sumitpaul5839]

setMoves(response.data.moves[0].move.name);

[@SonuSharma-lh1qq]

bro muje bhi ese fast process krna h to kya me SSD use kr skta hu .....

[@VarshaSingh-hi2sb]

From where to get that pikachu link... can someone plz tell..?

[@SachinVerma-td8ou]

It's pokeapi

[@hasnainmalick8888]

No one: Literally No One: Thapa: In every video aj ka video bohat awesome honay wala ha to chaliye juray rahe xD:hahahha.

[@souvikpal106]

Sir, I've one question if we use setState inside useEffect if will cause an infinite loop because as you told that useEffect becomes active after the page render and if we use setState it will render the page. So it will cause an infinite loop. Correct me if I'm wrong.

[@DemonHeadYT]

if dependencie diya rehga toh

[@nicetomeetugaming7024]

Thanks for this amazing video!

[@officialbeingdeveloper]

hello bhai i want to disable right click on i am able to disable by using oncontextmenu and pointer event ; but this also disabled to scrolling feature on file as i have used pointer event none but without using both pointer-event : none and Oncontextmenu:return false : the allow to right click!! please tell me how can i disable right click on with enabled scrolling feature!!

[@YourTechWhiz]

You should have use dependency list in the useEffect.

[@InspireUShorts58]

Optional hai .. compulsory nhi

[@YourTechWhiz]

@@InspireUShorts58 It isn't compulsory, but there is something called " good programming ".

[@Kuku__Das344]

Samajh nhi aya pr deekh kr acha lga

[@introvertleader]

1st view like comment & gm!

[@InspireUShorts58]

And boom guys 💥😂

[@surajmishra432]

Bhai plz btaayein ki aapne custom pc build kaise kiya.. bahut se students ko ye problem aati hai ki unka development server start hone mai bahut time lagata hai or sath hi overall pc performance b achi nahi rehti .. plz share some tips about how did you solve this problem

[@PROTECHRAHUL]

useEffect me function k andar function me axios kyo use kiya h directly useEffect k function me use kyo nii kiya h , anyone?

[@yogitataluja1058]

setmoves(res.data.moves[0].move.name)

[@sidtiwari9258]

Need your support , can you make video that how can we just show moves name in another select's option . I tried and that works but browser get hangs after few mins..seems data rendering continuously .

[@rajatsaraswat64]

Api k data kese aa rha h Y he pta nhi h sir Km s km es data ko kese nikalte h jo to bta dete

[@curiouscosmos786]

And BOOM Guys 😁

[@covidnineteen5249]

Thank you sir !!!

[@coderhh6515]

Cool video

[@pushpamaywad8221]

Awesome👍👍

[@rashmiwankhade4097]

Hello,i like the vedio...can you please give me some clarity what is difference between fetch api and fetch interceptor,axios api and acios interceptor...

[@creativeakshara8438]

Nice 👍👌 Sir please snake game in JavaScript And please make canvas tutorials 🙏🙏🙏🙏🙏

[@rushikeshavachat4282]

Thapa meri bhai console mein api ka data mil nahi raha hai.Code is right.Issa kyon hoo raha hai.Reply my comment.

[@ShubhamGupta-mx2hn]

Make video on DEEP LINKS IN REACT NATIVE EXPO

[@KalyaniTalks]

Sir hm us moves ke array ko kaise fetch kr skte hai ?

[@osamaayub405]

sir can you make a video on crud operations using axios having issues in it.

[@AkhileshYadav-lv3kh]

Thank you sir 👍👍

[@The_Guiders_Consultancy]

Thapa bhai I love you

[@aviseksahoo1953]

Cannot read property 'length' of undefined show kar raha hai

[@huzaifashaikh818]

Acha smjha ta ho

[@DesiMatrixXD]

Kya mujhe koi ye batayega, axios use karne ke liye useEffect ki kya zaroorat hai? Mai toh bina useEffect ke bhi data fetch kar sakta hu. toh useEffect ka actual use kaha hai?

[@slmshady539]

aap useEffect k andr api call karte hai taaki jaise hi page load ho maltb k jaise hi page pehli bar brower pe aega waise hi useEffect harkat me aega aur api call ho jaega... ek tareeka hua karta tha useEffect se pehle componentDidMount kark bas wahi kaam ab useEffect se karte hai

[@DesiMatrixXD]

@@slmshady539 mujhe 2 months pehle hi samjh gaya tha bhai, but still appreciate your effort brother ❤️

[@slmshady539]

@@DesiMatrixXD koi baat nahi bhai... Toh react developer ban gaye ya abhi college me ho aap

[@DesiMatrixXD]

@@slmshady539 college me hi hu fir bhi developer hu. Maine abhi jald hi ye project banaya hai react-blogging-app.herokuapp.com/ Custom backend ke saath.

[@slmshady539]

@code fire I'm glad it helped 👍

[@ridarachakula7865]

Amazing.. Thankyou..

[@rajbannasa7662]

thank you so much sir

[@darshanadey4696]

Awesome video

[@satyajitdas6133]

how can you export the fetched data from axios to another react file?

[@KuldeepSingh-pl7rv]

i guess you should try useContext()

[@spacex3360]

Context is best but redux is also best option for big project

[@baksh9595]

Sir I have a question about useEffect() , I have created this project but I also want to add another select Option but when I change the select item it only also call useEffect method. so how can I call useEffect method on only one event.

[@abhaysingh-os3qu]

useEffect(()=>{ }[value]); just before the function ends use square bracket and write the variable which u want to change everytime it is selected/changed. hope this helps

[@yogeshsharma8966]

sir ,axios ke or bhi methode, hai put,delete,push wo bhi btao please

[@abhijeetmokale5604]

Custom PC Video Lao Vinod Sir!!! please

[@Wishdomloom9462]

nice video brother

[@introvertleader]

Custom PC video want!

[@nevilpereira1988]

This is for get.. kindly make video for post api, Super and class

[@bhakuninavneet3906]

Thanku sir

[@listology-mostamazingtop1041]

First view , like , comment by me

[@ThapaTechnical]

Many many thanks

[@Ronak3262]

In sab mein se mujhe sirf ek pata tha aur hua tha Pikachu😅

[@learninghuaeasy9549]

Cors error in react how to solve it

[@kalyanipriyadarsini]

Wow

[@KIRTIMGM-u4p]

sir please provied api link in your video.

[@swatisinha3141]

How to post data in a form in react plz make video using functional components

[@khushboosharma9717]

How to implement this with lifecycle methods?

[@atifaslam2965]

if you want to use a particular move from the array. then just do this setMoves(res.data.moves[0].move.name); change 0 if you do not like

[@prash0202]

Not working - Cannot read property '0' of undefined

[@atifaslam2965]

@@prash0202 console.log(res.data) first thn see what happens

[@prash0202]

Thanks Atif... Please help me and let me know how can i show 2 values with only single useState([])

[@spacex3360]

@@prash0202 state ko as a object use karo

[@syedsabeehahmedfatmi1099]

pawfect video

[@mithunkumars6097]

Your are awesome

[@DEEPANSHU_NAG]

Great project 💯👏🏻✌🏻

[@ThapaTechnical]

Glad you like it!

[@DEEPANSHU_NAG]

@@ThapaTechnical 👍🏻

[@demoforall4305]

@@ThapaTechnical Sir Series me 104 videos the to aaj morning me 54 kese ho gaye ??

[@aviseksahoo1953]

@@ThapaTechnical Cannot read property 'length' of undefined show kar raha hai

[@thecoderraj3777]

Thanks sir :)

[@raj5583]

It is very easy to pull data from dummy services. If possible try to fetch data from the real time backend server then this will not be this easy

[@nicetomeetugaming7024]

wrong.

[@rupalisarkar85]

Please make a tutorial video on react native

[@muhammadahsanqureshi6704]

any one plz help me ..i am facing error in when writting res.data.moves.length. this error:Unhandled Rejection (TypeError): Cannot read property 'length' of undefined? plz if anyone can help.

[@rahul4tech]

the problem is when you load page first time without changing drop down value axios calls the api without whatever option and the data returned is empty or i say undefined, so you should code like whenver use effect is called it should check that option is defined or not for eg: if(option){ const fetchData = async() => { const res = await axios.get(`pokeapi.co/api/v2/pokemon/${option}`) setData((prev) => { return { ...prev, pokeName : res.data.name, pokeMoves : res.data.moves.length } }) } fetchData() }

[@ankurpandey7103]

@@rahul4tech thanks brother for the help!

[@samirbante8554]

Mai chala pokemon dekhne

[@yashfarm6913]

Hii sir, please answer: how get images of Pokemon in our react app?

[@nicetomeetugaming7024]

You can get using api, also there are various methods to do it.

[@bivusingha2079]

Bhaiya API CORS error ke uper kuch or video banau please please please.

[@ankitaggarwal2700]

Bhaiya *custom pc build* per video bnao

[@0xRudro]

20:40 jhoot pakra gya

[@surajali1101]

25 alpha saphirea-sapphire-sapphire

[@raj.saurabhh]

Axios ka kya kaam?

[@sudarshanthakur4129]

setmovesname(res.data.moves[0].move.name);

[@abdulmuneebafridi4437]

love u bro for ur commment

[@ashifmohammad9465]

Error ka bataw bhai

[@abhishekporwal5056]

How can we do this with the help of TOKENS??

[@nicetomeetugaming7024]

which tokens?

[@Ninja-cn6kj]

image kaise laye isme

[@knowledgeera3210]

we will get that by result.data.moves[0].move.name

[@ujjwalgaur7028]

i guess 25 par pikachu

[@eramperwez4617]

Console.log(res.data.moves[0]);

[@nageshworshah8314]

console.log(resp.data.moves[0].move.name);

[@coderhh6515]

First commenter

[@mohitsaud2071]

setMove(res.data.moves[0].move.name);

[@kshitizshah6685]

axios ko bare ma poila kina na vaneko bro , thet malai 2 minute lagthyo poila...LOL

[@PriyaSingh-tx2pe]

setMoves(res.data.moves[0].move.name);

[@ijazDeveloper786]

that,s great

[@noaakshay]

setMoves(res.data.moves[0].name); i guess this one is right