An online markdown blog and knowledge repository.
Reference: Reactjs.org
Html5 forms natively store state and load a new page when submitted.
For React this could be a problem (or it might be exactly what you want).
To manage the submit event in React, use a technique called "Controlled Components".
Mutable State in React is kept in the 'state' property.
Input Form Elements that rely on React Components 'state' property are called Controlled Components.
Use of an event handler that calls this.setState({...})
React State will always drive the input value when using a Controlled Component.
An event handler needs to be written for every way the data could change. A React Component must be used to capture all the resulting input state.
textarea Tag: Uses a value attribute instead of its children.
select Tag: Uses a value attribute on the root select tag instead of selected attribute on a specific option element.
Note: Arrays can be passed into the value attribute.
Also Note: Elements that use other APIs for their input (like input type=file) are handled differently in React.
Multiple Inputs: Add a 'name' attribute to each element. The handler function will choose what to do based on event.target.name value.
What is a ‘Controlled Component’?
Input elements that rely on Component State.
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?
Depends on the input type and the desired result in the UI. For example, it would be good to update the form when using the
<select>and<option>elements so the user gets feedback upon slecting an item in the drop-down list. In another scenario using a textbox, UI feedback telling the user how complex their password is might be another reason to provide immediate feedback. React Components re-render when their state is changed.
How do we target what the user is entering if we have an event handler on an input field?
Use
event.target.name
Operates like a compact IF statement.
Like an if statement, some code will execute based on whether the test expression returns true or false.
An If statement could consume 3 to 5 lines of code (or a lot more) depending ono what it is doing.
The Turnary / Conditional Operator handles simple this-or-that decisions in a single line of (elegant and succinct) code.
Example IF vs Ternary:
// with an if code block, extra code is necessary.
if (true){
return = "yes";
} else {
return = "no";
}
// with a turnary statement, a single line is not too obscure
// and gets the job done
return (true) ? "yes" : "no";
Yes, this is possible.
return isIlluminated ? 'The room is now illuminated.' : isSmoky ? 'The room was burnt by fire, no electricity!' : 'Someone turned out the light!';
Separate multiple result operations using a comma.
Brandon Morelli on Codeburst.io The Conditional Operator Explained
Why would we use a ternary operator?
Simple, elegant, single-line-of-code alternative to the IF statement and codeblock.
Rewrite the following statement using a ternary statement:
if(x===y){
console.log(true);
} else {
console.log(false);
}
// turnary style
console.log((x===y) ? true : false);
Notes taken while reading through react-bootstrap.github.io/forms/overview
<FormControl> Renders a bootstrap-styled form.
<FormGroup> Wraps a form with spacing, adds a label, and includes validation state.
<FormGroup controlId... and <FormLabel> should be used to ensure accessibility.
Uncontrolled FormsControls values can be acceessed by attaching a 'ref' to it and calling ReactDOM.findDOMNode(ref) and use that to get the values.
Attribute 'disabled' is a boolean that controls input capability and fades the input somewhat as a visual queue. Can also be applied to a <fieldset> to disable all controls.
Add import statements at the top of your Component or HTML file to use them.
import Form from 'react-bootstrap/Form';
Note: The above import statement also imports Form.Label.
Reactjs documentation on Conditional Rendering
React Components can be built for specific functional purposes that only render depending on a current state.
Buttons and other HTML elements can be stored in variables.
JSX is magic
Elements can be added conditionally - enclose the test conditional, add two amp's && and then the html elements to render if true, within braces.
Remember This: In javascript, the following behavior is expected:
(true && expression) == expression;
(false && expression) == false;
Use turnary/conditional statement to set text within elements, or elements themselves.
Note: Components can be prevented from rendering. See the reference link for details on how to code this functionality.
Brandon Morelli on CodeBurst Ace your JS interview
Go back to Readme.md