Открыть таблицу после того, как я нажму кнопку на реакции

Я делаю программу в реакции и хочу показать список разрешений после нажатия кнопки. Прямо сейчас я показываю информацию с помощью window.alert, но я хочу показать ее в более красивом списке.

Кнопка, которую я нажимаю:

Открыть таблицу после того, как я нажму кнопку на реакции

Что отображается прямо сейчас (выводит все элементы в списке по одному):

Открыть таблицу после того, как я нажму кнопку на реакции

Когда я нажимаю эту кнопку, я хочу, чтобы все элементы списка отображались следующим образом:

Открыть таблицу после того, как я нажму кнопку на реакции

Есть ли способ сделать это?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
148
1

Ответы 1

Вы можете использовать комбинацию компонентов react-bootstrap Popover и ListGroup в методе рендеринга.

const popover = (
  <Popover id = "popover-permission" title = "Permissions">
    <ListGroup>
      <ListGroup.Item>Permission 1</ListGroup.Item>
      <ListGroup.Item>Permission 2</ListGroup.Item>
      <ListGroup.Item>Permission 3</ListGroup.Item>
    </ListGroup>
  </Popover>
);

return <OverlayTrigger trigger = "click" placement = "bottom" overlay = {popover}>
  <Button variant = "secondary">Show Permissions</Button>
</OverlayTrigger>

Другие вопросы по теме