andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update wording

Browse Source
This commit is contained in:
Chalarangelo
2021-10-13 20:40:54 +03:00
parent a1d4f62042
commit b4dd74f868
18 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/LimitedWordTextarea.md
View File

@ -2,14 +2,14 @@
title: LimitedWordTextarea
tags: components,input,state,callback,effect,event,intermediate
firstSeen: 2019-02-20T18:22:22+02:00
lastUpdated: 2021-01-07T23:57:13+02:00
lastUpdated: 2021-10-13T19:29:39+02:00
---
Renders a textarea component with a word limit.
- Use the `useState()` hook to create a state variable, containing `content` and `wordCount`, using the `value` prop and `0` as the initial values respectively.
- Use the `useState()` hook to create a state variable, containing `content` and `wordCount`. Use the `value` prop and `0` as the initial values respectively.
- Use the `useCallback()` hooks to create a memoized function, `setFormattedContent`, that uses `String.prototype.split()` to turn the input into an array of words.
- Check if the result of applying `Array.prototype.filter()` combined with `Boolean` has a `length` longer than `limit` and, if so, trim the input, otherwise return the raw input, updating state accordingly in both cases.
- Check if the result of applying `Array.prototype.filter()` combined with `Boolean` has a `length` longer than `limit`. If it does, trim the input. Otherwise return the raw input, updating state accordingly in both cases.
- Use the `useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable during the initial render.
- Bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.