У меня есть три флажка, и в зависимости от проверенного ввода я показываю дополнительный ввод, поэтому я создал объект с некоторой информацией, чтобы заполнить необходимые места.
{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, но я думаю, что он выдает ошибку из-за точки после параметра.
Я не знаю, как перейти с {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>
)}