Create a modal popUp for each object using react

2
votes

I have a list of cards in react and, in each card i have a button.

That button, when clicked, should display a modal popUp with some information but i cant create a modal for each entry because de data target is always the same.

I tried to change the data-target on my modal by concateneting the "#" with the name of the object but it doesn´t work.

Here is the code:

 {this.state.groups.map((groups) => {
 return ( 
    <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#' + groups.name + '" >
      {groups.name}
    </button>

    <div className="modal fade" id={groups.name} tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" />

 )})}
1
javascriptreactjsbootstrap-modal
Not really sure why its not working. But I am suggesting using React.createPortal for popups. reactjs.org/docs/portals.html Its better to have one single modal, instead of rendering a modal for every single button. – Alexandr Zavalii
Thanks but it has to be with normal boostrap – jose azevedo

1 Answers

1
votes

instead of this data-target="#' + groups.name + '" maybe you can try this

data-target={`#${groups.name}`}