- [Instructor] Where we previously had an end point to retrieve the courses from, imagine a scenario where you want to add another course to the list. To allow this, we've added the add courses form component to the app. It's a standard react form that holds its own state for the form values. The support button raises the unsubmit event on the form and the handling function is where we want to send the data to the server. Sending data is not a lot different to retrieving data in terms of using the fetch API. The submit form function is asynchronous. We want to be able to make fetch API calls and handle promises using async/await. The event is passed into this function. As we want to stop the default get requests being made, using the prevent default function. On line 14 of the code, we prepare the request party using the adjacent string five function and the state from the component. We preserve the number type on privacies and the passing function. Once we've created the request party, we create a request options object. This sets the method type to post the content type header to application/jason and the body to the one we just prepared. We then make a call to the fetch API using the same URL as we got the call state from earlier adding a second argument that the request options body a post request, where we turn the set body if it's successful with the two oh one stakes is code, which means created. For brevity, we just console log the response out here, but you really should do similar area of checking to that which we did for the response in the get courses function. Adding information into the form and clicking submit. Add status to the file hold on jason server. And it sends a two oh one response back. Jason server will automatically allocate the next free institute to the ID. In this case, seven. We can see that the body of the request is logged out on the browser console. Choosing seven from the dropdown on the filter for cost is table, will initiate a request for the course with the idea of certain to be displayed which it is. To check that it's been added to all of the courses, we select zero from the dropdown. And you can see that our new course is indeed there at the bottom of the web development courses. Just so you know, we've also added some sorting to the courses array, so the course is display in category order. But that's just more JavaScript then react. Depending on your application, a form submit handler may not be the right place to make post requests. We also didn't go into validation here. I started to just implementing more JavaScript. You need to decide what you need and how and when you're going to use it for yourself. If it needs to be in an effect hog, don't forget about dependencies and asynchronous limitations. If you need to make pot delete or update requests, just follow the same path as we did for the post request, adding the correct properties to the request options and using the correct URL. So now you can get your application to make requests for data and sending data back to create or manipulate it at the end point.