Textarea Character Limit
ReactJS
Easy
5 views
Problem Description
Create a textarea with a live character counter and max limit.
Output Format
Render a React component.
Constraints
Track value in state and limit length in handler.
Official Solution
import React, { useState } from 'react';
export default function App() {
const max = 120;
const [text, setText] = useState('');
function onChange(e) {
const next = e.target.value;
setText(next.slice(0, max));
}
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode feedback</h2>
<textarea value={text} onChange={onChange} rows={4} style={{ width: '100%', padding: 12, borderRadius: 12, border: '1px solid #bbb', resize: 'vertical' }} />
<div style={{ marginTop: 8, color: '#555' }}>{text.length} / {max}</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!