1. Home
  2. Training Library
  3. Forms and Events

React form components

Developed with
QA

Contents

keyboard_tab
ReactJS
1
React Event forms
PREVIEW1m 17s

The course is part of this learning path

Application and Service Development with ReactJS
course-steps 9 certification 5 lab-steps 3
play-arrow
React form components
Overview
DifficultyBeginner
Duration7m
Students6

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

- HTML forms will work out to 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 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 a virtual dom and if the user interacts with the actual dom, say when the 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 cold 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 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 some user. 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 on the browser, notice how the value some user 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 workout 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 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 a non change event on the username input element or make that event handler function pass in the event and call set username with the value from the actual dom access using event.target.value as it's argument. As we change the text in the input now you can see that the hook 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 as 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.

About the Author

Students662
Labs8
Courses10
Learning paths3

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.