Update and housekeeping
This commit is contained in:
@ -1,15 +1,15 @@
|
||||
---
|
||||
title: LimitedWordTextarea
|
||||
title: LimitedWordTextarea
|
||||
tags: input,state,effect,event,beginner
|
||||
---
|
||||
|
||||
Renders a textarea component with a word limit.
|
||||
|
||||
* Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
|
||||
* Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
|
||||
* If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
|
||||
* Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
|
||||
* 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 call `setFormattedContent` with the value of `event.target.value`.
|
||||
- Use the `React.useState()` hook to create the `content` and `wordCount` state variables and set their values to `value` and `0` respectively.
|
||||
- Create a method `setFormattedContent`, which uses `String.prototype.split(' ')` to turn the input into an array of words and check if the result of applying `Array.prototype.filter(Boolean)` has a `length` longer than `limit`.
|
||||
- If the afforementioned `length` exceeds the `limit`, trim the input, otherwise return the raw input, updating `content` and `wordCount` accordingly in both cases.
|
||||
- Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
|
||||
- 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 call `setFormattedContent` with the value of `event.target.value`.
|
||||
|
||||
```jsx
|
||||
function LimitedWordTextarea({ rows, cols, value, limit }) {
|
||||
|
||||
Reference in New Issue
Block a user