change limited text area component to hooks implementation

snippets/LimitedTextarea.md

@@ -2,41 +2,41 @@
 
 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.
+Use the `value` and `limit` props to pass in the initial `content` and the `limit` values for the LimitedTextArea component.
+Create a method, `handleChange`, which trims the `event.target.value` data if necessary and updates `content` with the new entered content.
 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);
-  }
+function LimitedTextArea(props) {
+  const { rows, cols, value, limit } = props;
 
-  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>
-    );
-  }
+  const setFormattedContent = text => {
+    text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
+  };
+
+  const [content, setContent] = useState(value);
+  // Run once to test if the initial value is greater than the limit
+  useEffect(() => {
+    setFormattedContent(content);
+  }, []);
+
+  const handleChange = event => {
+    setFormattedContent(event.target.value);
+  };
+
+  return (
+    <div>
+      <textarea
+        rows={rows}
+        cols={cols}
+        onChange={handleChange}
+        value={content}
+      />
+      <p>
+        {content.length}/{limit}
+      </p>
+    </div>
+  );
 }
 ```
 
@@ -46,7 +46,6 @@ ReactDOM.render(
   document.getElementById('root')
 );
 ```
-
 <!-- tags: input,state,class -->
 
 <!-- expertise: 0 -->