React: Инпут и счётчик символов

Сделай контролируемый инпут, храни его значение в состоянии и отображай длину строки. Счётчик не должен показывать значение больше 32.

Контролируемые поля ввода. Управляй значением из state и показывай актуальную длину.

Что нужно сделать

Создай состояние для значения инпута.
Сделай инпут контролируемым: значение берётся из состояния, обновляется по onChange.
Отображай длину строки под инпутом, но не больше 32.

Финальный вид

Карточка с инпутом и счётчиком символов (ограничение 32). Финальный результат должен быть таким:

💡 Подсказка

Храни значение инпута в состоянии и обновляй по onChange.
Ограничь поле ввода до 32 символов: maxLength={32}.
Показывай длину введённой строки под инпутом: value.length.
Документация React:
- Реагирование на ввод состоянием: https://react.dev/learn/reacting-to-input-with-state
- Компонент input (DOM): https://react.dev/reference/react-dom/components/input
- Формы: https://react.dev/learn/forms

👀 Решение

import React, { useState } from 'react';
import './styles.css';
 
export function TextInputCounter({ placeholder = 'Введите текст...' }) {
  const [value, setValue] = useState('');
 
  function handleChange(e) {
    setValue(e.target.value);
  }
 
  return (
    <article className="input-card" data-testid="input-card">
      <input
        className="text-input"
        type="text"
        placeholder={placeholder}
        value={value}
        onChange={handleChange}
        maxLength={32}
      />
      <p className="counter" aria-label="counter">{value.length}</p>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <TextInputCounter />
      </section>
    </main>
  );
}

Что нужно сделать

Финальный вид

React: Инпут и счётчик символов

Что нужно сделать

Финальный вид

🧑‍💻 Это не баг! Это фича!