1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Working with External Data

Sending Data

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyIntermediate
Duration31m
Students91

Description

This module looks at how to work with External Data in React. You’ll be looking at Class Components, Effect Hooks, and how to handle data.  

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • The component lifecycle  
  • Hooks in React  
  • How to create restful services  
  • How to use an Effect Dependency Array  
  • How to hand errors in data requests 
  • How to send data   

Intended Audience

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  

Prerequisites

It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

We previously had an input 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 holds its own state for the form values, the submit 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 a sync await. The event is passed into this function as we want to stop the default GET request being made using the prevent default function. On line 14 of the code, we prepare the request body is the Jason stringify function and the stateful component. We preserve the number type on privacy's passing function Once we've created the request body, we create a request options object. This sets the method type to post the content type header to application slash 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 cost data from earlier. Adding a second argument, the request options body. A post request will return the sent body if it's successful, but the 201 status code, which means created for brevity, we just console log the response out here, but you really should do similar error checking to that which we did for the response in the get courses function, adding information into the form and clicking Submit adds data to the file held on Jason server, and it sends it to a wrong response back. Jason server will automatically allocate the next free integer 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 drop down on the filterable courses table will initiate a request for the course with the idea of setting to be displayed, which is to check that it's been added to all of the courses, we select zero from the drop down. And you can see that our new courses indeed there at the bottom of the web development courses, just so you know. We've also added some salt into the courses array. So the courses display in category order, but that's just for JavaScript and React. dependent 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, as that's 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 hook, don't forget about dependencies and asynchronous limitations. If you need to make put, 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 send data back to create or manipulate the endpoint.

About the Author
Students2858
Labs8
Courses29
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics