dynamically added item does not trigger materilizedcss modal using jquery in react

Question

This is a to do list project where clicking on each item triggers a modal div where the item can be edited or deleted. everything works fine, however, When I add a new item and click on it the modal div does not open. here is the project on codepen:

https://codepen.io/abdolsa/pen/MpKYOp?editors=0010

I suspect the problem is coming from these lines.

 $(document).ready(function() {
  $('.modal-trigger').leanModal();
});

I also used the following method with no success ...

$(document).on('click', function()
{
$('.modal-trigger').leanModal();
});

Thank you for reading. Any feedback is appreciated.

Answer 1

Try adding this code inside the handleSave() function.

$('.modal-new').leanModal();

In line 94 add a new class to the div, "modal-new"

<a className="btn-floating btn-large waves-effect waves-light red modal-trigger scale-out modal-new" href="#modal1" onClick={this.handleAdd}>

Try whether this is working