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