на нормальный селект много времени уйдет

проекты мои, потому меня никто не держит)

Я говорю про самий базовий функціонал, просто дроп показати сховати, і все, без контролів із клави і тп речей

Тим паче всерівно стилі перебивати

выбирай

:) сорян ;)

хорошо, что-то подберу

ещё есть 1 вопрос, более конкретный

Есть компонент

<label htmlFor="flavor">Вкусы</label>
          
          <button type="button" onClick={this.addFlavor}>+</button>
          {[...Array(this.state.countFlavor)].map(( value, index ) => (
                                                    <div className="flavor-wrap" data-index={index} key={index} onChange={this.handleFlavor}>
                                                      <input
                                                        type="text"
                                                        id={'flavor' + index}
                                                        name={'flavor' + index}
                                                        placeholder="Вкус"
                                                      />
                                                      <input
                                                        type="number"
                                                        id={'flavor' + index}
                                                        name={'flavor' + index}
                                                        placeholder="Код товара, SKU"
                                                      />
                                                    </div>
                                                  ),
          )}

https://prnt.sc/rmel8y

По нажатию на "+" добавляются ещё 2 поля, вкус и sku, и так до бесконечности. Я сделал добавление их по маркеру в стейте, но если в форме нету ни одного поля с required, то форма сбрасывается и редиректит на главную. Может подскажите, как можно исправить данный баг? или в какую сторону смотреть?

<label htmlFor="flavor">Вкусы</label>
          
          <button type="button" onClick={this.addFlavor}>+</button>
          {[...Array(this.state.countFlavor)].map(( value, index ) => (
                                                    <div className="flavor-wrap" data-index={index} key={index} onChange={this.handleFlavor}>
                                                      <input
                                                        type="text"
                                                        id={'flavor' + index}
                                                        name={'flavor' + index}
                                                        placeholder="Вкус"
                                                      />
                                                      <input
                                                        type="number"
                                                        id={'flavor' + index}
                                                        name={'flavor' + index}
                                                        placeholder="Код товара, SKU"
                                                      />
                                                    </div>
                                                  ),
          )}

посмотри редирект в форме когда отрабатывает, не понятно почему редиректит + зачем тебе id в реакте? [...Array(this.state.countFlavor)] что-то тут странное происходит) и индекс использовать как key  не очень идея

разобрался, почему редиректит, решается атрибутом type="button" у кнопки (потому что без него, клик воспринимается как отправка). Закинул сюда уже с ним, а до этого ещё не затестил, сорян😳


[...Array(this.state.countFlavor)] - тут странного ничего, число из стейта

countFlavor:  1

превращаем в массив и его разворачиваем, а потом мэпим, и на каждой итерации показываем нужный компонент.

Да, key с помощью индекса драфтовая идея, просто очень отвлекают варнинги в консоли.

countFlavor:  1

а) да) батттон без тайпа как сабмит

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

[...Array(this.state.countFlavor)] как минимум чтобы этого не далать, может хранить в стейте сразу массив и на эддфлейвор добавлять айтем?

оно то можно, но не очень нужно(

яка тобі різниця що в тому стейті зеберігається?

ти ж не зможеш без стейту локального перерендерити компоненту щоб додати ще один елемент

Подскажите, есть либа с таким функционалом?

лол