Fetch data using Fetch API in React JS | Part-2 | React Basics

[Music] hey guys in this video we are going to learn about post put and delete method if you haven't watched the part 1 then please watch it first then you can continue from here let's comment this out for the post method we are going to use this as you can see here for the post method you have to add some properties after the url such as the name of the method body which contains data we want to post also headers which contains content type which is json in this official documentation of a fetch api there are many more properties available like mode cache credentials redirect etc now for the post method we need to get some data from user and for that we will create small form inside this form we need four fields first is the title which is in the text format second is the body which is also in the text and the third is a user id which is number now the last input tag is for the submit button don't forget to set its type to submit we need a state for this form fields and we can do that using only single use date name it as inputs and initialize it with an empty object create a handle change method to set this inputs state pass previous input state by using a spread operator then use event.target.net and event.target.value to set new values call this handle change method on unchange event in each input field create a handle submit method and pass event let's just log the values for now to see if it is working or not call handle submit in the on submit event of the form also add placeholder values so that we don't get confused we should write even dot persist here to remove the current event from the event pool otherwise an is relevant value from another event or a null value will be read inside this callback our form is working fine let's create a post method let me commend this copy this entire fetch method and paste it inside our component instead of this values let's set it with our own form inputs we have to use parseind because the type of the user id is number call this api post method inside the handle submit method now we are getting a response this api will not permit us to update anything on its server so we cannot check it but we are getting the same output as mentioned here so our post method is working fine for the put method we just have to pass id of object we want to modify inside the url like a slash then id number and change the method name to put while everything else is just same as we did for the post method for the delete method we have to pass the idea of object we want to delete and write delete as a method name and you are good to go here i can't show you because we cannot modify this api one more thing i want to show you about the async and avoid keywords you can use async keyword at the beginning of the function just like this and avoid keyword before the fetch method as you can see everything is working fine that's it for this video if you want more videos like this please let me know in the comments thanks for watching

Channel: CodeBucks

Views: 7,102

Keywords: fetch in react, api in reactjs, fetch data reactjs, fetch data from an API in reactjs, data from api in reactjs, react api call, react restful api call, how to use api in react, get method in react, reactjs get method, API in react, fetch API, codebucks, how to fetch data in react, Fetch data using Fetch API in React JS, Fetch Data from an API in React.js, from an API in React.js, React JS for beginners, reactjs tutorial, reactjs, reactjs developer

Id: 9BPpaz9DkRU

Length: 6min 32sec (392 seconds)

Published: Wed Dec 02 2020