0

Всем привет. Работаю с формами в react и двумя библиотеками - react-hook-form и yup Yup помогает легко настраивать валидацию полей, но знать эти библиотечки для моего вопроса не нужно. Вопрос такой.

Есть некоторое количество селектов, сделанных с помощью material ui Селекты мапятся из стора.

   {createUserRoleStore.rolesQuantity.map((elem, index)=>{
                                        return(



                                                <TableRow key={elem.id}>
                                                    <TableCell>

                                                        <FormControl className='customSelect' variant="standard" fullWidth>

                                                            <InputLabel id="demo-simple-select-label">Выбрать роль</InputLabel>
                                                            <Select
                                                                {...register(`roleItem${index}`)}
                                                                labelId='roleItem'
                                                                id="roleItem"
                                                                value={createUserRoleStore.rolesQuantity[index].roleTitle}
                                                                label="roleItem"
                                                                onChange={(e)=>createUserRoleStore.handleChange(index, e.target.value)}
                                                                error={!!errors.roleItem}
                                                                helperText={errors?.roleItem?.message}
                                                            >
                                                                {createUserRoleStore.rolesList.map(elem=><MenuItem key={elem.id} value={elem.title}>{elem.title}</MenuItem>)}

                                                            </Select>
                                                        </FormControl>

                                                    </TableCell>
                                                </TableRow>

                                        )
                                    })}

Строчка error={!!errors.roleItem} отвечает за корректное отображение ошибок, которое прописывается отдельно. Опустим это.

Дело в том, что этих селектов может быть пять, а может быть десять, и для каждого селекта строчка {!!errors.roleItem} должна быть уникальной, т.е это должно выглядеть вот таким образом:

{!!errors.roleItem0}{!!errors.roleItem1}{!!errors.roleItem2}{!!errors.roleItem3}

и т.д. Но как это сделать - я не знаю. Как можно при передаче пропса в компонент при переборке его изменить?

{!!errors.roleItem[index]} не работает. Пробовал по всякому. Буду крайне признателен всем, кто ответит на мой вопрос.

5
  • errors[index] чем не гоже?
    – Darth
    8 ноя 2021 в 15:47
  • @Фитц Чивэл errors[index] - тогда react будет перекидывать index, но если другого варианта вообще нет, то можно и так. Ключ всегда уникален, но ключ - это что-то, что существует в контексте, вашего roleItem[index] - допустим - roleItem0 не существует. Обычно для таких случаев бывает id, но в вашем случае похоже его нет. Я не проверял, но что, если в key map прогнать кастомный массив из id равный длине вашего errors
    – WalkMess
    8 ноя 2021 в 16:04
  • не работает конструкция error={!!errors.roleItem[index]} Попробовал в самую первую очередь когда делал. Ошибка: imgur.com/a/bDxA0iJ 8 ноя 2021 в 16:04
  • Фитц Чивэл Если вы внимательно прочли, то !!errors.roleItem[index] не существует, ключ должен быть в контексте, прочтите еще раз.
    – WalkMess
    8 ноя 2021 в 16:07
  • Ничего не понимаю, причем тут контекст? Мне же нужно, чтобы при каждом переборе массива, в компоненту <Select> пробрасывался уникальный элемент объекта errors. Вот укороченный вариант как это должно быть. <Select error={!!errors.roleItem1}></Select> <Select error={!!errors.roleItem2}></Select> <Select error={!!errors.roleItem3}></Select> <Select error={!!errors.roleItem4}></Select> 8 ноя 2021 в 16:19

1 ответ 1

0

Нашел решение:

error={!!errors[`roleItem${index}`]}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.