Introducing CrudHunt:Open-source Full-stack CRUDs for Next.js by KeenThemes
Browse CrudHunt 
Theme functions not working when render/mapping html elements
Hello everyone,
I am using React.js with Metronic 8 Html theme. The dropdown in TR that I added statically when the page loads is working (Top tr). But the dropdown inside the dynamically fetched <tr> of the map function is not triggered. (map loop)
How can I trigger these dynamically created dropdowns.
<tbody className="text-gray-600 fw-bold">
<tr>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={""}/>
</div>
</td>
<td>a</td>
<td>email</td>
<td>phone</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div className="menu-item px-3">
<a href="#%22%0AclassName=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0Adata-kt-users-table-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
</div>
</td>
</tr>
{
this.state.data ?
this.state.data.map((row)=>(
<tr key={row.id}>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={row.id}/>
</div>
</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
data-kt-menu="true">
<div className="menu-item px-3">
<a href="#%22%0AclassName=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0Adata-kt-users-table-filter=%22delete_row" target="_blank" rel="noopener noreferrer">Delete</a>
</div>
</div>
</td>
</tr>)) : null
}
</tbody>
Replies (0)
There is no reply for this question at the moment. Be first to leave a reply.
