From e95a0d26c75b29f020062c1d6ef18e876ee7364b Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Thu, 18 Oct 2018 19:48:42 +0300
Subject: [PATCH] Add LimitedTextarea

---
 snippets/LimitedTextarea | 48 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 snippets/LimitedTextarea

diff --git a/snippets/LimitedTextarea b/snippets/LimitedTextarea
new file mode 100644
index 000000000..74859fa66
--- /dev/null
+++ b/snippets/LimitedTextarea
@@ -0,0 +1,48 @@
+### LimitedTextarea
+
+Renders a textarea component with a character limit.
+
+Use the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.
+Create a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.
+In the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.
+
+```jsx
+class LimitedTextarea extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      content: props.value,
+      characterCount: props.value.length,
+      limit: props.limit
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  
+  handleChange(event) {
+    let newContent = event.target.value;
+    if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);
+    this.setState(state => ({ content: newContent, characterCount: newContent.length }));
+  }
+  render() {
+    return (
+      <div>
+        <textarea rows={this.props.rows} cols={this.props.cols} onChange={this.handleChange} value={this.state.content}>
+        </textarea>
+        <p>{this.state.characterCount}/{this.props.limit}</p>
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+ReactDOM.render(
+  <LimitedTextarea limit={32} value='Hello!' />,
+  document.getElementById('root')
+);
+```
+
+< !--tags: input,state,class -- >
+
+< !--expertise: 0 -- >
+