Skip to content

Latest commit

 

History

History
64 lines (57 loc) · 3.7 KB

Class301-04.md

File metadata and controls

64 lines (57 loc) · 3.7 KB

Forms (REACT & DOM)

HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:

     <form>
       <label>
         Name:
          <input type="text" name="name" />
       </label>
          <input type="submit" value="Submit" />
     </form>

This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it’s convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called “controlled components”.

Controlled Components In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

JavaScript — The Conditional (Ternary) Operator Explained

  1. Starting With the Basics — The if statement Using a conditional, like an if statement, allows us to specify that a certain block of code should be executed if a certain condition is met. Consider the following example: We have a person object that consists of a name, age, and driver property. let person = { name: 'tony', age: 20, driver: null }; We want to test if the age of our person is greater than or equal to 16. If this is true, they’re old enough to drive and driver should say 'Yes'. If this is not true, driver should be set to 'No'. We could use an if statement to accomplish this: if (person.age >= 16) { person.driver = 'Yes'; } else { person.driver = 'No'; } But what if I told you we could do the same exact thing in just one line of code? Well, here it is: person.driver = person.age >=16 ? 'Yes' : 'No';

  2. Nested Ternary But what if our movie theater from above gives a discount to students and seniors? We can nest ternary operators to test multiple conditions. For this scenario assume tickets are: $12 for the general public, $8 for students, and $6 for seniors. Here’s what the code for a Senior citizen would look like: let isStudent = false; let isSenior = true; let price = isStudent ? 8 : isSenior ? 6 : 10 console.log(price); // 6 There’s a lot going on in this code, so lets break it down: First we check to see if our patron is a student. Since isStudent is false, only the code after the first : is executed. After the : we have a new conditional: Our second conditional tests isSenior — since this is true, only the code after the ? but before the : is executed. price is then assigned the value of 6 which which we later log to the screen.

  3. Multiple operations It is also possible to run multiple operations within a ternary. To do this, we must separate the operations with a comma. You can also, optionally, use parenthesis to help group your code: let isStudent = true; let price = 12; isStudent ? ( price = 8, alert('Please check for student ID') ) : ( alert('Enjoy the movie') ); In the above example, the price of our movie is already set to $12. If isStudent is true, we adjust the price down to $8, then send an alert to have the cashier check for student ID. If isStudent is false, the above code is skipped, and we simply alert to enjoy the movie.