ReactJS Tutorial – 42 – HTTP GET Request
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703762572_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 42 – HTTP GET Request
All right in this video we will learn how to make a get request using Axios and render the fixed data in a react component to fetch the data we need to have an API endpoint for that I will be making use of JSON placeholder as you
Can see here it is basically a fake online REST API for testing and prototyping I want to focus on fetching data in our react application and not on creating an API I will however leave a link to this site in the description down below now if you
Scroll down to the routes section you can see the possible HTTP requests you can make for this video I will be making a get request to slash posts which will fetch an array of posts to display in the UI let’s get started I’m going to go back to vs code and create a
New component so within the source folder I’m going to add a new folder called components and within the folder a new file host list dot is within the file I’m going to use the react snippet RCE to create a class component now as of this recording react version 16.8 is out
Which does give us access to hooks however I want to first show you how to work with HTTP and class components and talk about codes separately so back to our post list component I’m going to remove the named export and for the JSX simply add the text list of posts
Back in app component I will include host list component if you now save all the files and take a look at the browser you should be able to see the text list of posts now for data fetching first step we import the Axios library and post this component
Axios from Axios second step we need to create a state property which will store the list of posts I’m going to use the reactor snippet iconst to add a constructor and then a state property called posts initialized to an empty array third step we are going to use
Axios to make a get request to the JSON placeholder API the question though is where do we place the code to make the get request the answer is in the component did mount lifecycle method this method will be executed when the component mounts for the first time and this only executed once during
Components lifetime a perfect place for our get request now to make a get request we invoke the get method on the Axios library this method accepts the API endpoint as its argument go back to the browser and click on the post route copy the URL
From the address bar and paste it as a string parameter to the get method alright we are now making a get request but how do we access the data that is returned well Axios is a promise based library so we can add them and catch blocks then accepts an arrow function as
Its argument which gives us access to the response and I’m going to simply log to the console response also if at all something went wrong we simply lock that error in the console so again an arrow function which receives the error and log error if you now go back to the
Browser and open dev tools you should see an object logged in the console and if I expand the data property you can see the list of 100 posts that have been retrieved all that is left now is to assign this data array to the state probability and then render it in the JSX
So back in vs code when we get back the response we are going to set the response data to the posts array so this dot said state posts is going to be response dot data and in the render method first the structure the state property then display this list of posts using
The map method I’m going to have curly braces if at all there is at least one post supposed dot length then we are going to use the map method and display each post title so post he is going to be post dot ID and we are
Going to render just post dot title if post is an empty array we are not going to render anything and save the file go back to the browser and you should be able to see the list of items fetched from the api being displayed in the browser
Now let me explain how this complete process happens as it is really important we start off with the constructor we have a state property called hosts which is an empty array then the control flows to the render method the text list of posts is displayed but the actual list
Is not rendered because the array is an empty array at the moment then the control flows to component did mount over here we make our get request to the API endpoint once the data is retrieved we then update the State hosts property when you change state the component will
Rerender and this time the array is not empty and hence the list of titles are rendered in the browser now let me also quickly show you how to display an error message when the API fails I will add another state property called error message initialized to an empty string
In the cache block I will set it to the string error retrieving data this dot said state ever retrieving data in the JSX if there is an error message I will display it so the structure and conditionally render it finally I will alter the URL
To an invalid URL if you now head back to the browser you should see the message other retrieving data so that is how you make get requests with Axios and react in the next video let’s quickly take a look at host requests thank you guys for watching feel free to subscribe
I’ll see you guys in the next one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Hey man, why are you not using functions instead of classes?
Thank you vishwas
why get response two time ???!!
the variable name 'posts' and variable in constructor state 'posts' .. do both names should be same ? more over errorMsg also ?
God bless you richly. You have helped me and my career. Thank you very much
u r awesome Man
Thanks for the video! it is very helpful!
Can anyone please help me how to get single data from get request
Means /posts/1 where 1 can be 2 3 … passing a variable and works according to the id ??
Please help me I am in real trouble I need to submit my project this week
6:39 error message
5:55 Summary
Module not found: Can't resolve 'axios' in 'D:reacthello-worldsrc' i am getting this error
the best , thanks for this video
These videos have been so helpful, I cannot thank you enough Vishvas!
Very Helpful Video
Just wonder can we use componentWillMount instead componentDidMount, so that it doesn't have to rerender bcs the state is changed?
Best tutorial always on the point and gives clear explanation
How do you render nested arrays though?
i got an error:"Unhandled Rejection (TypeError): Cannot read property 'catch' of undefined"
where can i get this program code
Peeks
nice today i came across another great react teacher who has solved my doubts …. subscribed as well as liked and has also shared it with my fellow dev friends
JUST KNOW IT!!!
You're freaking mind-blowing and genius my man!
where to define axios.get , if i need to get the data based on an id typed? and what is the format of url for getting data for a particular id?
TypeError: Cannot read property 'length' of undefined
Awesome
Superb ………..!!!👌👌👌👌👌👌👌👌👌👌👌👌👌
Thank you