From dd06afb0b37d7aaa774946de4fe9ace187ef3a6f Mon Sep 17 00:00:00 2001
From: Isabelle Viktoria Maciohsek <maciv@hotmail.gr>
Date: Mon, 31 Aug 2020 23:24:34 +0300
Subject: [PATCH] Update Select.md

---
 snippets/Select.md | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/snippets/Select.md b/snippets/Select.md
index f4d979a93..5af725fef 100644
--- a/snippets/Select.md
+++ b/snippets/Select.md
@@ -7,7 +7,8 @@ Renders a `<select>` element that uses a callback function to pass its value to
 
 - 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 destructuring on the `values` array to pass an array of `value` and `text` elements and the `selected` attribute to define the initial `value` of the `<select>` element.
+- Use the `selected` attribute to define the `defaultValue` of the `<select>` element.
+- Use destructuring on the `values` array to pass an array of `value` and `text` elements.
 
 ```jsx
 function Select({ values, callback, disabled = false, readonly = false, selected }) {
@@ -15,16 +16,28 @@ function Select({ values, callback, disabled = false, readonly = false, selected
     <select
       disabled={disabled}
       readOnly={readonly}
+      defaultValue={selected}
       onChange={({ target: { value } }) => callback(value)}
     >
       {values.map(([value, text]) => (
-        <option selected={selected === value} value={value}>
+        <option value={value}>
           {text}
         </option>
       ))}
     </select>
   );
 }
+
+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')
+);
 ```
 
 ```jsx