React Form Components

Developed with
QA

Contents

keyboard_tab
ReactJS
1
React Event Forms
PREVIEW1m 24s
2

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
React Form Components
Overview
DifficultyBeginner
Duration7m
Students171
Ratings
5/5
starstarstarstarstar

Description

This module looks at React Event Forms.  

Learning Objectives 

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

  • React event forms  
  • React form components  
  • Form Submission 

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

- [Narrator] HTML forms will work out of the box with no need to add any extra syntax for them to display in React. Any inputs, check boxes, radio buttons and the like, and also submit buttons can be used as if we weren't using React at all. However, we usually want to have access to form values before the user submits so that we can do things like validation and verification. It makes sense that forms inherently have some internal state, whether using React or not. Whether we choose to record those values in state, in the component, or elsewhere is a matter for you to decide. Let's take a step back here though. React works with the virtual DOM. And if the user interacts with the actual DOM, say when they update a form field, React will have no access to the values unless we mine for them. This creates a situation where the actual DOM and the virtual DOM could diverge and React would have no way of knowing what values it should render in the input element. The source of truth is in the actual DOM, and that's not good for React. What we have created in this situation is an uncontrolled component. So called as React is not controlling the values that are displayed in the component, and it will not update the virtual DOM if changes are made in the actual DOM. We could use a React mechanism called refs to get to the values from the DOM and set the virtual DOM values to this. But generally, this isn't good practice and we won't go into how we can do that here. That's what's happening here. I can update the input to my heart's content, but if you look in the developer tools, at the component tab there's no way for React to access the value directly from our component. So what's the alternative? Simple, make react control the value that is rendered by storing it in state and setting the value of the input to the value stored in state, in a control component as shown. You can see that the username is stored in state, initially set as the string sumUser. This is done on line five. The value of the text input called username is set to be the value of username from state, that's done on line 13. When we render this in the browser, notice how the value sumUser is already rendered in the input box. React is controlling this value. Let's try and change the value in the username input box. As you can see, this is not possible. Can you work out why? If you need to pause the video and have a think, please do so. Did you get it? That's right. There's no mechanism to update the value of the username state, and therefore the virtual DOM doesn't update. We need to respond to the user interaction. In fact, if you had coded this out and checked the warning message on the console, it would have told you as much as you can see. In this instance, the way to update state with the value in the input box is to use an unchanged event on the username input element, or make that event handler function passing the event and call set username with the value from the actual DOM. Access using event dot target dot value as its argument. As we change the text in the input now, you can see that the hooks state updates. As does the value displayed in the input box in the browser window. Obviously, we could call a handler function for on change instead and run some validation and verification to decide whether to allow the value that's been typed to become the state. From that, we could perhaps set some CSS styles on the input and even display a conditional error message to help the user. We'll leave that as a little challenge for you to complete.

Lectures

About the Author
Students4233
Labs8
Courses29
Learning paths6

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics