Insert ID in React Modal

Question

I am using https://react.semantic-ui.com/modules/modal/ this modal. I would like to add an id attribute in div which have modal class. How can I do that ?

In react, you usually prefer `refs` in identifying an element/component rather than via ID. Why do you need to insert an ID? — Tyro Hunter, Apr 01 '19 at 06:26
I would like to attach an event that's why I need an ID. Thanks — abu abu, Apr 01 '19 at 06:32

score 2 · Accepted Answer · answered Apr 01 '19 at 06:57

Did you try simply adding an id prop?:

<Modal
  trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
  open={this.state.modalOpen}
  onClose={this.handleClose}
  basic
  size='small'
  id="theIdHere"
>
...

it worked for me

<div class="ui page modals dimmer transition visible active" style="display: flex !important;">
  <div id="theIdHere" class="ui small basic modal transition visible active">
  ...

However, the modal div is only available once the modal is shown, so be careful to attach the event upon modal open and remove once the modal is closed

Insert ID in React Modal

1 Answers1