Create Select.md

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