Как реализовать поведение такого компонента?

Question

[gooseNjuice ()]

Есть вот такой элемент, например.

<div>
        <select>
            <option disabled>Choose language</option>
            {makeSelect(languages)} //делает большой список языков
        </select>
        <select>
            <option>Low</option>
            <option>Middle</option>
            <option>Native</option>
        </select>
    <Component/>//вот кнопка, про поведение которой будет вопрос
</div>;

Подскажите, как мне реализовать следующее поведение кнопки:
1)При нажатии value кнопки меняется с "+" на "-" и значение "onClick", и обратно - примерно понимаю, как воплотить.
2) Кликнута, когда value="+": она отрисовывает после текущего дива/элемента, в котором находится, ещё один точно такой же (в данном примере рендерит ещё два select для отображения названия и уровня владения языка и такую же кнопку)
3) Работает не только в данном месте кода, но и в другом div'e, например:

//div с указанием имени института, специальности и  дат начала и окончания учебы
<div><input placeholder="enter university's name" name="nameUniversity"/>
                    <input placeholder="enter speciality" name="nameSpeciality"/>
                    <select defaultValue="degree" name="educationDegree">
                        <option disabled>degree</option>
                        <option value='bachelor'>bachelor</option>
                        <option value='master'>master</option>
                    </select><br/>
                    <input type="date" required name="startDate"/>
                    <input type="date" required name="endDate"/>
<Component/>
                </div>

- то есть, видимо, принимает в себя элемент, в котором находится?
4) Кликнута, когда value="-": удаляет этот элемент. Не с конца, а именно тот, который отрисовала эта данная кнопка
Долго думаю и читаю документацию, но не продвинулся, помогите кто чем может :-)

Answer 1

[Максим]

Вам нужно хранить у кнопки в каждом блоке свой идентификатор. Например в data-* аттрибуте. Тогда, когда будете нажимать на кнопку минус, относящемуся к данному блоку, сможете считать у нее этот атрибут и вуаля.

Пример кнопки:

<button data-myId='100' onClick={this.minus}>minus</button>

Пример считывания:

minus = (e) => {
  console.log(e.currentTarget.dataset.myId) // 100
}

Массив с данными ваших "блоков" хранится в state и по минусу + зная айдишник, можно этот "блок" из state удалить (то есть, удалить элемент из массива).

А рисовать все ваши "блоки" нужно через функцию (скорее всего map), которая проходит по вашим данным в state и отрисовывает их.

Да, на деле все выглядит легко, если я правильно понял вашу задачу, но если у вас много пробелов в понимании этого теоретического поста, то нужно подтягивать основы. Трудность этой задачи может заключаться для вас в том, что нужно иметь прослойку с данными (расположенную в state, об этом было выше), по которым вы будете генерировать селекты+опции+кнопки для каждого блока.