title: React-data-table-component library open popup modal on button click
body: <p>I am trying to make a popup that when the user press on the update button the popup opens but it doesn't work if the Modal is outside the data table , i tried to put the modal inside the cell but it creates alot of models which is triggering the same function over and over and decrease performance and makes the page laggy if i have more than 10 columns , how can i solve this and put Modal which is trigger dynamically which trigger on the same row ?</p>
  <pre><code>const columns = [
   {
  name: &quot;ID&quot;,
  cell: (a, i) =&gt; Number(i + 1),
  width: &quot;6%&quot;
  },
  {
  name: &quot;username&quot;,
  selector: 'username',
  sortable: true
  },
  {
  name: &quot;email&quot;,
  selector: 'email',
  sortable: true,
  },
  {
  name: &quot;phone&quot;,
  selector: 'phone',
  sortable: true
  },
  {
  name: &quot;portal&quot;,
  selector: 'portal',
  sortable: true
  },
  {
  name: &quot;update&quot;,
    cell: (row, i) =&gt; &lt;div id={&quot;modal-&quot;+ (Number(i) + 1 )} className=&quot;modal-open&quot;&gt; 
  &lt;button onClick={(e) =&gt; handleUpdate(row._id)} className='btn btn-warning' &gt;update 
   &lt;/button&gt; &lt;/div&gt;,
  sortable: true
    },
  ];
  
  const tableData = {
  columns,
  data,
  };
  &lt;DataTableExtensions {...tableData} &gt;
                  &lt;DataTable
                      columns={columns}
                      data={data}
                      noHeader
                      direction='center'
                      defaultSortField=&quot;ID&quot;
                      defaultSortAsc={true}
                      pagination
                      highlightOnHover
                  /&gt;
              &lt;/DataTableExtensions&gt;
              
                  &lt;Modal
                      string={&quot;Change Password&quot;}
                      modalNumber={&quot;1&quot;}
                      childrens={
                          &lt;form onSubmit={handleSubmit} method=&quot;POST&quot; encType=&quot;multipart/form-data&quot; &gt;
                              &lt;BtnSubmit string={&quot;Change Password&quot;} /&gt;
                              &lt;Input type=&quot;password&quot; name=&quot;oldPass&quot; label=&quot;Old Password&quot; value={oldPass} change={handleChange} /&gt;
  
                          &lt;/form&gt;
                      }
                  /&gt;
  </code></pre>
  <p>this is my whole code what i make that the id of the modal change depends on which modal i clicked which in this case is only one because its out side of the data index loop , it also doesn't work if its outside of the <strong>cell</strong> , how can i solve this when the user clicks on update button it opens the modal which specify from the modalNumber that equals to cell index ?</p>