Controlled Uncontrolled inputs - Update

patterns/17.controlled-uncontrolled-input.md

@@ -1,21 +1,17 @@
 # Controlled - Uncontrolled Components
 
-- Gist: https://gist.github.com/vasanthk/a6bf35857749b09275a339f6fd9469bb
-- In depth: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
-
-### Reference:
-- https://www.sitepoint.com/video-controlled-vs-uncontrolled-components-in-react/
-- https://facebook.github.io/react/docs/uncontrolled-components.html
-
-
 It’s hard to talk about controlled inputs in the abstract. Let’s start with an uncontrolled (normal) input and go from there.
 So, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value.
 this is what we refer to as an "uncontrolled" input
 
 #### What makes an element “controlled”?
 There are other form elements, of course. You have checkboxes and radios and selects and textareas.
 A form element becomes “controlled” if you set its value via a prop. That’s all.
-`let simpleInput = '<input type="text" />';`
+
+```javascript
+let simpleInput = '<input type="text" />';
+```
+
 When you fiddle with this input in the browser, you see your changes. This is normal.
 
 A controlled input disallows the DOM mutations that make this possible.
@@ -75,9 +71,9 @@ class MyComponent extends React.Component {
     return <input type="text" ref="myInput" />
   }
 }
-
-// We can make this even simpler by using array fns in ref
-
+```
+We can make this even simpler by using array fns in ref
+```javascript
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -106,7 +102,7 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some
 It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
 
-DEFAULT VALUES
+#### Default Values
 In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM.
 With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled.
 To handle this case, you can specify a defaultValue attribute instead of value.
@@ -139,3 +135,9 @@ class NameForm extends React.Component {
 }
 ```
 Likewise, `<input type="checkbox">` and `<input type="radio">` support defaultChecked, and `<select>` supports defaultValue.
+
+### Reference:
+- Gist: https://gist.github.com/vasanthk/a6bf35857749b09275a339f6fd9469bb
+- In depth: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
+- https://www.sitepoint.com/video-controlled-vs-uncontrolled-components-in-react/
+- https://facebook.github.io/react/docs/uncontrolled-components.html