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

LimitedTextarea

Renders a textarea component with a character limit.

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 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.

function LimitedTextArea(props) {
  const { rows, cols, value, limit } = props;

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

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