Мне нужно, чтобы при вводе ограниченного текста выдавало ошибку об ограничении. Как это сделать?

Question

[Garri_Klim]

const SearchForm = () => {
    const [isSearchOpen, setSearchOpen] = useState(false),
        formRef = useRef(null);
    useClickOutside(formRef, () => setSearchOpen(false));
    const [inputText, setInputText] = useState("");
    const handleSubmit = e => {
        if (inputText.length >= 150) {
            e.preventDefault();
        }
    };

    return (
        <form
            ref={formRef}
            className={cn("search-form", {
                "search-form--focus": isSearchOpen,
            })}
            onClick={() => setSearchOpen(true)}
            onKeyPress={() => setSearchOpen(true)}
            action="/search"
            // eslint-disable-next-line
            role="searchbox"
            onSubmit={handleSubmit}
        >
            <input
            maxlength="149"
            size="149"
                value={inputText}
                onChange={e => setInputText(e.target.value)}
                className="search-form__input"
                name="filter"
                type="text"
            />

            <button
                className="search-form__button"
                type="submit"
                aria-label="Header search button"
            />
        </form>
    );
};

Comments

[Валерий Павлов]

Скинь нормально, пометь код кодом.

[Garri_Klim]

Иван, готово

[Андрей]

const [error, setError] = React.useState(false);
.....
.....
.....
if (inputText.length >= 150) {
e.preventDefault();
setError(true);
}

....
...
...
{error && Ошибка!}

[Garri_Klim]

Андрей, {error && Ошибка!} а куда этот код вставлять? Я просто с реактом только знакомиться начинаю и много еще непонятно

[Андрей]

Garri_Klim, после input-a например