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

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 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 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>
    );
  }
}

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

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

< !--expertise: 0 -- >