Skip to content

301-read_4.md

Latest commit

 

History

History
61 lines (34 loc) · 2.12 KB

301-read_4.md

File metadata and controls

61 lines (34 loc) · 2.12 KB

React.js

React Forms

- What is a ‘Controlled Component’?

form element whose value is controlled by React in this way is called a “controlled component”.

- Should we wait to store the users responses from the form into state when they submit the form OR should we update the state with their responses as soon as they enter them? Why.

we update the state with their responses as soon as they enter them. Because we want to making the React state the source of truth.

- How do we target what the user is entering if we have an event handler on an input field?

using event.target.value.

The Conditional (Ternary) Operator Explained

- Why would we use a ternary operator?

It's a shoter way to write a single line conditional if statement.

- Rewrite the following statement using a ternary statement:

  if(x===y){
 console.log(true);
  } else {
 console.log(false);
  }

Solution:

x === y ? console.log(true) : console.log(false)

React Bootstrap - Forms

The <FormControl> component renders a form control with Bootstrap styling. The <FormGroup> component wraps a form control with proper spacing, along with support for a label, help text, and validation state. To ensure accessibility, set controlId on <FormGroup>, and use <FormLabel> for the label.

Form controls

For textual form controls—like inputs and textareas—use the FormControl component. FormControl adds some additional styles for general appearance, focus state, sizing, and more.

Sizing

Use size on <FormControl> and <FormLabel> to change the size of inputs and labels respectively.

Readonly

Add the readOnly prop on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Readonly plain text

If you want to have readonly elements in your form styled as plain text, use the plaintext prop on FormControls to remove the default form field styling and preserve the correct margin and padding.

Inline

Group checkboxes or radios on the same horizontal row by adding the inline prop.