From 09a8722068904f9d23f35399fedcf194fc2a064d Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:10:51 +0200
Subject: [PATCH 1/7] Create Input.md

---
 snippets/Input.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 snippets/Input.md

diff --git a/snippets/Input.md b/snippets/Input.md
new file mode 100644
index 000000000..c899c86d3
--- /dev/null
+++ b/snippets/Input.md
@@ -0,0 +1,32 @@
+### Input
+
+Renders an `<input>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<input>` element.
+Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+
+```jsx
+function Input ({ callback, type = 'text', disabled = false, readonly = false, placeholder = '', value = '' }) {
+  return (
+    <input 
+      type={type} 
+      disabled={disabled} 
+      readonly={readonly} 
+      placeholder={placeholder}
+      value={value}
+      onChange={(event) => callback(event.target.value)} 
+    />
+  );
+}
+```
+
+```jsx
+ReactDOM.render(
+  <Input type='text' placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->

From aefbbb93d36d9f31974fe05e26efd3b520be8d9d Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:13:49 +0200
Subject: [PATCH 2/7] Update Input.md

---
 snippets/Input.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/snippets/Input.md b/snippets/Input.md
index c899c86d3..b46238227 100644
--- a/snippets/Input.md
+++ b/snippets/Input.md
@@ -6,14 +6,13 @@ Use object destructuring to set defaults for certain attributes of the `<input>`
 Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
-function Input ({ callback, type = 'text', disabled = false, readonly = false, placeholder = '', value = '' }) {
+function Input ({ callback, type = 'text', disabled = false, readonly = false, placeholder = '' }) {
   return (
     <input 
       type={type} 
       disabled={disabled} 
       readonly={readonly} 
       placeholder={placeholder}
-      value={value}
       onChange={(event) => callback(event.target.value)} 
     />
   );

From 2bf1fe77ba197b072dc09976f05bf05161013370 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:16:24 +0200
Subject: [PATCH 3/7] Create Textarea.md

---
 snippets/Textarea.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 snippets/Textarea.md

diff --git a/snippets/Textarea.md b/snippets/Textarea.md
new file mode 100644
index 000000000..30978c920
--- /dev/null
+++ b/snippets/Textarea.md
@@ -0,0 +1,32 @@
+### Textarea
+
+Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
+Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+
+```jsx
+function TextArea ({ callback, cols = 20, rows = 2, disabled = false, readOnly = false, placeholder='' }) {
+  return (
+    <textarea 
+      cols={cols}
+      rows={rows}
+      disabled={disabled} 
+      readOnly={readOnly} 
+      placeholder={placeholder}
+      onChange={(event) => callback(event.target.value)} 
+    />
+  );
+}
+```
+
+```jsx
+ReactDOM.render(
+  <TextArea type='text' placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->

From 9aa3b89a665898da88df2e3df5af23dba5a5bfa1 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:16:44 +0200
Subject: [PATCH 4/7] Update Input.md

---
 snippets/Input.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/snippets/Input.md b/snippets/Input.md
index b46238227..aab046860 100644
--- a/snippets/Input.md
+++ b/snippets/Input.md
@@ -6,12 +6,12 @@ Use object destructuring to set defaults for certain attributes of the `<input>`
 Render an `<input>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the input to the parent.
 
 ```jsx
-function Input ({ callback, type = 'text', disabled = false, readonly = false, placeholder = '' }) {
+function Input ({ callback, type = 'text', disabled = false, readOnly = false, placeholder = '' }) {
   return (
     <input 
       type={type} 
       disabled={disabled} 
-      readonly={readonly} 
+      readOnly={readOnly} 
       placeholder={placeholder}
       onChange={(event) => callback(event.target.value)} 
     />

From 554eb28d66e4286b3eb15dd081edc0c6c78e57cb Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:38:54 +0200
Subject: [PATCH 5/7] Update Textarea.md

---
 snippets/Textarea.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/Textarea.md b/snippets/Textarea.md
index 30978c920..1d12df45c 100644
--- a/snippets/Textarea.md
+++ b/snippets/Textarea.md
@@ -22,7 +22,7 @@ function TextArea ({ callback, cols = 20, rows = 2, disabled = false, readOnly =
 
 ```jsx
 ReactDOM.render(
-  <TextArea type='text' placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
+  <TextArea placeholder='Insert some text here...' callback={(val) => console.log(val)}/>,
   document.getElementById('root')
 );
 ```

From 8c9d0b8bc05f40cc187f3b5faa8f9ef0338a7b75 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:45:51 +0200
Subject: [PATCH 6/7] Update and rename Textarea.md to TextArea.md

---
 snippets/{Textarea.md => TextArea.md} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename snippets/{Textarea.md => TextArea.md} (98%)

diff --git a/snippets/Textarea.md b/snippets/TextArea.md
similarity index 98%
rename from snippets/Textarea.md
rename to snippets/TextArea.md
index 1d12df45c..eb754c7b6 100644
--- a/snippets/Textarea.md
+++ b/snippets/TextArea.md
@@ -1,4 +1,4 @@
-### Textarea
+### TextArea
 
 Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
 

From 0b970c1a4e47de9e82b2495036857d75399b189a Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Mon, 10 Dec 2018 10:48:03 +0200
Subject: [PATCH 7/7] Create Select.md

---
 snippets/Select.md | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 snippets/Select.md

diff --git a/snippets/Select.md b/snippets/Select.md
new file mode 100644
index 000000000..1367e4d86
--- /dev/null
+++ b/snippets/Select.md
@@ -0,0 +1,38 @@
+### Select
+
+Renders a `<select>` element that uses a callback function to pass its value to the parent component.
+
+Use object destructuring to set defaults for certain attributes of the `<select>` element.
+Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
+Use the `values` array to pass an array of `[value, text]` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
+
+```jsx
+function Select ({ values, callback, disabled = false, readonly = false, selected }) {
+  return (
+    <select 
+      disabled={disabled} 
+      readOnly={readonly} 
+      onChange={(event) => callback(event.target.value)} 
+    >
+      {values.map(v => <option selected={selected === v[0]}value={v[0]}>{v[1]}</option>)}
+    </select>
+  );
+}
+```
+
+```jsx
+let choices = [
+  ['grapefruit', 'Grapefruit'],
+  ['lime', 'Lime'],
+  ['coconut', 'Coconut'],
+  ['mango', 'Mango']
+];
+ReactDOM.render(
+  <Select values={choices} selected='lime' callback={(val) => console.log(val)}/>,
+  document.getElementById('root')
+);
+```
+
+<!-- tags: input,functional -->
+
+<!-- expertise: 0 -->