Как преобразовать один выпадающий список в кнопки в React / JS?

Question

У меня был раскрывающийся список для выбора пола: Мужской / Женский

Однако наш дизайнер хотел придать ему остроту и включить выпадающие кнопки таким образом:

Как я могу реализовать эти кнопки в Javascript / React, где нажатие на одну кнопку выделяет ее, а затем отменяет выделение противоположной кнопки?

Answer 1

Я узнал, что Bootstrap обладает этой функциональностью, если вы включите data-toggle = "buttons" в верхнем div.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" autocomplete="off" checked> Option A
        </label>
        <label class="btn btn-primary">
            <input type="checkbox" name="options" autocomplete="off"> Option B
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox" name="options" autocomplete="off" checked> Option C
        </label>
    </div>