30-seconds-of-code/snippets/LimitedWordTextArea.md

LimitedWordTextArea

Renders a textarea component with a word limit.

Use the value of the value prop to determine the initial state.content and state.wordCount 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.wordCount, and bind it to the component's context. In therender() 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.

class LimitedWordTextArea extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: props.value,
      wordCount: props.value.split(' ').filter(Boolean).length,
      limit: props.limit
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    let newContent = event.target.value;

    if (newContent.split(' ').filter(Boolean).length > this.state.limit) {
      newContent = newContent
        .split(' ')
        .splice(0, this.state.limit)
        .join(' ');
    }
    this.setState(state => ({
      content: newContent,
      wordCount: newContent.split(' ').filter(Boolean).length
    }));
  }
  render() {
    return (
      <div>
        <textarea
          rows={this.props.rows}
          cols={this.props.cols}
          onChange={this.handleChange}
          value={this.state.content}
        >
        </textarea>
        <p>{this.state.wordCount} / {this.props.limit}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <LimitedWordTextArea limit={5} value='Hello there!' />,
  document.getElementById('root')
);

< !--tags: input,state,class -- >

< !--expertise: 0 -- >