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] 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 -->