Как использовать переменную в форме React Hook для ошибки

У меня есть три флажка, и в зависимости от проверенного ввода я показываю дополнительный ввод, поэтому я создал объект с некоторой информацией, чтобы заполнить необходимые места.

{opciones.map((opcion) => (
            <>
                {
                    watch(opcion.titulo_checked) && (
                        <div className='mt-3 '>
                            <div className='flex'>
                                <label htmlFor = {opcion.input_mostrar} className = "mb-4 font-semibold text-gray-900 dark:text-white">Nombre del programa en {opcion.idioma} </label>
                                <span className='flex items-center ml-1 -mt-3 text-xs text-red-600'>  <FaAsterisk /> </span>
                            </div>
                            <input {...register(opcion.input_mostrar, {

                                required: {
                                    value: true,
                                    message: "Campo nombre es obligatorio"
                                },
                                minLength: {
                                    value: 5,
                                    message: "Este campo debería de tener al menos 5 carácteres"
                                }
                            })} type = "text" id = {opcion.input_mostrar}
                                className = "mt-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder = "Introduce el nombre de la página" minLength = {5}
                            />
                            {errors.nombre_pagina &&

                                <span className='text-red-500 text-sm'>

                                    {errors.nombre_pagina.message}
                                </span>
                            }
                        </div>
                    )
                }
            </>
        ))}

Я не знаю, как перейти с {errors.nombre_pagina} на {errors.opcion.input_mostrar}. Сейчас все работает нормально, но ошибки явно не отображаются, потому что я не менял последнюю часть. Не совсем понимаю, как это сделать, я пробовал ошибки. {opcion.input_mostrar} или просто error.opcion.input_mostrar, но ни один из них не работает, конечно, лол. ПД: nombre_pagin — то же самое, что и opcion.input_mostrar, но я думаю, что он выдает ошибку из-за точки после параметра.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знаю, как перейти с {errors.nombre_pagina} на {errors.opcion.input_mostrar} Сейчас все работает нормально, но ошибки очевидно, не отображаются, потому что я не изменил последнюю часть. Не совсем понимаю, как, я пробовал ошибки. {opcion.input_mostrar} или просто error.opcion.input_mostrar, но ни один из них не работает, очевидно

Вы можете легко сделать это, слегка изменив свой код. Вот как это можно сделать.


{errors[opcion.input_mostrar] && (
    <span className='text-red-500 text-sm'>
        {errors[opcion.input_mostrar].message}
    </span>
)}

Другие вопросы по теме

Есть ли способ добавить функцию ошибок в форме React Hook?
Почему моя условная проверка не работает с использованием zod и формы реагирования?
Пользовательское уточнение состояния ошибки массива полей реакции-хука-формы не будет обновляться
Ошибка назначения типа в массиве объекта: машинописный текст, динамические формы с использованием пользовательского интерфейса Shadcn, форма перехвата React и ZOD
Как использовать handleSubmit формы реагирования со схемой Zod: ввод данных onSubmit как z.input вместо z.output
Как указать значение по умолчанию (но не ноль) в числовом типе в форме zod и response-hooks?
Форма перехвата React не будет правильно удалять элементы из контекста провайдера во вложенном компоненте
Рендеринг пользовательского интерфейса в React JS
FormMessage не отображает ошибку проверки zod - Shadcn, Zod, response-hook-form, Next.js
Моя кнопка отправки также отправляет другую форму