4 Forms

4.1 FORMS HAVE STATE

CONTROLLED INPUTS VS. UNCONTROLLED INPUTS

 The default behavior of an input element is to allow the user to change

its value directly.
 In one-way data flow, on the other hand, every interaction with the user
interface results in an event which, when handled, updates the state.
 Changes to state then update the user interface.
 React calls a form input that can be directly manipulated by the user an
uncontrolled input, and one that can only be changed through changes
to the state object a controlled input.
4.2 Controlling an Input in a Function Component

When you run this component in a browser, typing into the input updates the
value of the emailAddress state variable, which is used as the value of the
input and is also output in the paragraph below the input.

The input behaves like a normal HTML input, but the component also has
access to the value of the input.
4.3 Controlling an Input in a Class Component

In a class component, controlling an input works the same way, but the
JavaScript is slightly different and a bit more verbose because of the need to
write and bind the event handler and to correctly address the state property.

4.4 USING UNCONTROLLED INPUTS

 Using controlled inputs ensures that your user interface strictly adheres
to the pattern of one-way data binding, and it enables you to easily work
with the current values of your input fields. However, it also creates a lot
of overhead work that may be unnecessary.
 For example, a “Contact Us” form within a user interface doesn’t need to
store the data entered it or do anything with the data as it’s being
entered.
  Essentially, such a form isn’t really part of the larger application at all,
and there’s maybe no reason for React to track and run an event handler
function for every keystroke that someone enters into a textarea input.
 Binding each input of a large form can be tedious and the additional
processing that it takes to listen for and respond to a large number of
form inputs can create performance issues.
 In cases where you don’t need to track the user’s input as they’re typing
and you don’t need to store the input in state, it may be a better choice
to use uncontrolled inputs and simply attach an event listener to the
form itself to run a function when the form is submitted.

4.5 Controlling the Input Element

 Controlling a textarea
 In React, a textarea is written more like an input element: as an empty
element (meaning it doesn’t have an end tag or content) with a value
attribute. You can use the onChange event listener to handle input into a
textarea in React,

 Controlling a Select Element

A select element in HTML creates a dropdown list, with any number of option
element children forming the items in the dropdown list. In HTML, each option
element has a Boolean attribute named selected

4.6 PREVENTING DEFAULT ACTIONS

When you submit a form in a browser window, the default action that the
browser will take is to reload the current page, passing the values from the
form as a query string appended to the URL.
  You can change the default action of the form element by using the
action and method attributes of the form element.
 The action attribute changes the URL that the form will submit to, and
the method attribute changes the HTTP method used to submit the form
(either using HTTP GET or HTTP POST).
 In user interfaces written using JavaScript, you don’t want the form
element to submit data to a URL at all.
 Instead, the form data should be handled by JavaScript.
 The reason for this is that default action of a form reloads the form or
loads a different URL, which has the effect of reloading the underlying
JavaScript library and erasing the state of the user interface.
 React doesn’t have its own method for preventing default actions.
Instead, it just uses the preventDefault method of the Event object.
 Any time you write an event handler to respond to a submit event, you
must include a call to preventDefault

Styling React
4.7 IMPORTING CSS INTO THE HTML FILE
  Create React App has built into it the ability to load and bundle ordinary
CSS files into your user interface.
 Importing a stylesheet into a React component has the benefit of being a
familiar way to work, and it also allows you to use existing stylesheets
that you may have.
 As with importing styles into the HTML file, CSS imported into the
components cascades to the component’s children.
 The styles are imported into the parent component, but the class and
element styles defined in the stylesheet are only used in the child.

4. 8 Cascading styles in components

By only applying styles using the class selector (which is created using the “.”
symbol in CSS stylesheets and matches the value of the className attribute in
JSX) you eliminate the problem of styles that are applied to IDs overriding
styles that are applied to classes, and styles applied to elements overriding
classes and IDs, and styles marked as !important overriding everything.

4.9 WRITING INLINE STYLES

React’s built-in DOM elements have a style attribute that accepts a style object
as its value. When you pass DOM style properties into this attribute, those
properties will be applied to the resulting HTML element. To demonstrate a
basic use of the style attribute.

JavaScript Style Syntax

The first difference is that a CSS rule-set does not follow the rules of JavaScript
object literals, although it does resemble one. In particular, CSS style rules
don’t have quotes around the values, while in JavaScript style objects, quotes
are required around strings.

The second difference between CSS rule-sets and JavaScript objects is that the
individual rules in CSS are separated by semicolons, while in JavaScript objects,
properties are separated by commas.

The third difference is that CSS property names containing more than one
word have hyphens between the words. In JavaScript, this would result in an
error, so JavaScript style properties use camelCase for multi-word names.
Finally, CSS has the concept of selectors, which is how styles can be selectively
applied to only certain elements. A rule-set attached to a class selector (which
is indicated by a . before the name of the ruleset) will apply to elements that
have that class (or className in JSX).

Improving Inline Styles with Style Modules

Rather than writing your style objects directly in the style attribute of each
element, you can create variables to hold the styles,

Variables created to hold style objects can be kept inside the component, or
you can put them into separate files and export them using either named
exports (if you want to create a style library containing the styles for multiple
components) or a default export.

Ignoring how ugly these styles will actually look in reality, they could be saved
in a file called messageStyles.js and then imported individually or as a group
into each component that needs to display a message.
CSS MODULES

CSS Modules give you some of the benefits of using JavaScript style objects while using
standard CSS stylesheets. Specifically, CSS Modules solve the problem of name conflicts and
scoping in CSS.
CSS modules can be written like normal CSS files, and then imported into your components
as if they were JavaScript. In fact, what happens during the compilation of your components
is that CSS modules are converted into JavaScript objects.

To import the preceding CSS module into a component, make sure to save the file
with .module.css at the end and use the following import statement:
When your component is compiled, the classes in the CSS module will be rewritten using a
format called ICSS, which stands for Interoperable CSS.