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





Вы можете использовать комбинацию компонентов 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>