reading-notes

reading notes for code fellows

Project maintained by dLeigh01 Hosted on GitHub Pages — Theme by mattgraham

React and Forms

Knowing how to use forms in React is going to be important going forward as a way to get user input in a better way than through HTML, and learning to use ternary operators is good to make cleaner code.

React Docs - Forms

HTML form elements work differently than other DOM elements within React because they have internal state by design. When a form takes in a value it automatically wants to move to a new page, so to control this in React, you use controlled components, which are form elements being controlled by React. The difference in state between React and HTML forms is that React only updates state using setState() and forms update their own state based on user input. If you render a form through React, you can make it so that React controls what happens in the form. To do this, you set the values in the form elements to this.state.value so they are updating through React, then add onChange with a function to update the React state with every change to the element. This also means you can pass the value to other UI elements.

In React, a <textarea> element uses a value attribute, so it can be used like a single-line input as a self-closing tag.

the <select> element creates a drop-down list in HTML, and works the same in React, except instead of having one of the options marked as selected for a default, you give the default a preselected value assigned to state that can be reassigned to whichever choice is selected.

<input type='file'> is unable to be controlled by React, so it works the same as in HTML.

When you’re handling multiple inputs, you can give a name attribute to each of them and let the handler sort out what to do with event.target.name and use the given name to update the corresponding state key.

Specifying the value of a controlled component makes it so the user can’t change the input unless you want them to. You can use this to do things like set a delay before they can enter something.

  1. A controlled component is a component that is being run and having its value managed by React.
  2. The status should be updated as the user enters their response so that the changes are being reflected on the page.
  3. We can target what the user is entering with a name value.

The Conditional (Ternary) Operator Explained

The ternary operator is written as condition ? value if true : value if false. You’re testing whether the condition is true or false, and then returnind the code on the correct side of the colon based on which it evaluates to. You can also nest ternaries to test for multiple conditions and run multiple operations within a ternary by surrounding them with parenthesis and separating each operation with a comma.

  1. We would use a ternary operator to reduce the amount of code needed for a simple if or if-else statement.
  2. x === y ? console.log(true) : console.log(false);

Things I Want to Know More About

How complicated can a ternary get before it is better/you have to use a regular if statement?

[< table of contents]

[< home]