Modal reusability

Given a list of item, each have a part defined as

<a href="#itemModal" data-id={ item._id ">{ item.name }</a>

and the modal is manually defined as

<div id="itemModal" className="modal modal-fixed-footer">
  <div className="modal-content">
    <h4>Edit Model</h4>
    <form> ... </form>
  </div>
  <div className="modal-footer">
    <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat ">Close</a>
  </div>
</div>

At the moment, the Modal component seem to require a trigger prop.

How can this component be reusable? I don’t want to create 500 if I have 500 items in my list.

Edit

A suggestion could be to have trigger be optional, and allow a selector prop to use when initializing the overlay with Materialize’s leanModal.

[isaiah]

@yanickrochon So the only requirement is to make the trigger property optional, right? We can make it happen.

[yanickrochon]

Bump.