1

I am building a simple React application that implements CRUD operations on the client-side and communicates with a backend via Ajax. I have a container component that has a list component that has many items.

So I have a component with a form to create a new item. I can also write a similar form to edit an item in the list. But I wanted to actually make a modal popup instead of just having a form on the same view. Typically, for instance, with Materialize, you have the following: 

  <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>



$(document).ready(function(){
    // the "href" attribute of .modal-trigger must 
    // specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });

So I have an edit button in each list item that would actually be the first part of the code above. Now my question is: where should the second part of the code -- the modal itself -- go in the structure of my React components? If I place it in the ListItem component, then every item is going to have a modal. My idea was to place the modal structure in the container component, right after the List component itself. But it does not seem to be working. So where exactly would you place your modal structure if you are using React? Note: I am not using Flux nor Redux, I am just trying to build a simple application using state and props.

// ContainerComponent:
<List>
<NewItemForm>
// I put the modal code inside the EditForm component, 
// but it doesn't seem to be trigger from the ListItem edit button :/
<EditForm>

// My ContainerComponent has the following code in componentDidMount:
$('.modal-trigger').leanModal();
nbkhope
  • 7,360
  • 4
  • 40
  • 58
  • So I played around with `$('#modal1').openModal()` and `$('#modal1').closeModal()` in order to make it work. Essentially, when you click the edit button in the `` component, that executes the call to **openModal()**. Then, in the `EditForm` component, when you click submit, it executes the **closeModal()** function. :) – nbkhope Jul 20 '16 at 04:56
  • Just after List component seems fine to me. Do you see any errors in the console? Have you tried removing all the other components and just tried rendering the modal component as an attempt to narrow down the issue? – andHapp Jul 24 '16 at 16:39

0 Answers0